

以下のコードをhtmlファイルに入れていますがレーダーチャートが表示されません。原因がわかる方教えていただけませんでしょうか。

コードの出典:
[”インラインSVG”を使ってレーダーチャートを作ってみよう！](http://www.casleyconsulting.co.jp/blog-
engineer/jquery/%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3svg%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%AC%E3%83%BC%E3%83%80%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E3%82%92%E4%BD%9C/)
\-- キャスレー技術ブログ

[code]

    <head>
    <style>
    #svg_container{
    width:600px;
    height:450px;
    margin:auto;
    }
    #chart_container{
    width:500px;
    height:500px;
    display: block;
    margin: auto;
    }
    
    #chart_foundation_pentagons {
    fill:none;
    stroke: #7ac5e9;
    stroke-width:1px;
    stroke-dasharray:3px;
    }
    </style>
    </head>
    
    <body>
    
    <div class="svg_container">
    <svg id="chart_container">
    <g id="chart_foundation_pentagons"></g>
    <g id="chart_Polygon"></g>
    <g id="marker_points_wrap"></g>
    </svg>
    </div>
    
    <script>
    //五角形を生成
    function createPentagons(dis){
     //polygon要素を生成
     var Pentagon=document.createElementNS("http://www.w3.org/2000/svg","polygon");
     var pentagonPoints ="";
     for (var i = 0; i < 5; i++){
    　var x = Math.cos(((72*i)-90)*Math.PI/180)*dis;
    　var y = Math.sin(((72*i)-90)*Math.PI/180)*dis;
    　pentagonPoints += (x+250) +","+ (y+220) + " ";
    }
     allPentagonPoints.push(pentagonPoints);
     //座標を設定
     Pentagon.setAttribute("points",pentagonPoints);
     return Pentagon;
    }
     
    //レーダーチャートの土台を作る。生成した五角形を表示
    function drawChartFoundation(){
     //中心からの距離ごとに五角形をつくる
     var distance = [1,50,100,150,200];
     for(var i=0; i<distance.length; i++){
      document.getElementById("chart_foundation_pentagons").appendChild(createPentagons(distance[i]));
     }
    }
    </script>
    
    </body>
[/code]


CC BY-SA 3.0
2018-01-31T07:31:52.567
41344
2020-04-11T20:01:55.340
2018-01-31T08:26:54.650
19110
27220
question
javascript html svg
インラインSVGでレーダーチャートを表示したい


根本的な原因は、JavaScript の関数を定義しているものの、それがいつ実行されるのかを書いていないことにあります。やりたいことに応じて、たとえば
`window.onload` イベントを使うなどの解決法がありますので、詳しくは JavaScript
のチュートリアルをご覧ください。引用元の記事では、DOM のロードが終わった後に描画させています (jQuery を使っています)。

[code]

    // 五角形を生成
    function createPentagons(dis){
      // polygon要素を生成
      var Pentagon=document.createElementNS("http://www.w3.org/2000/svg","polygon");
      var pentagonPoints ="";
      for (var i = 0; i < 5; i++){
        var x = Math.cos(((72*i)-90)*Math.PI/180)*dis;
        var y = Math.sin(((72*i)-90)*Math.PI/180)*dis;
        pentagonPoints += (x+250) +","+ (y+220) + " ";
      }
      // 座標を設定
      Pentagon.setAttribute("points",pentagonPoints);
      return Pentagon;
    }
     
    // レーダーチャートの土台を作る。生成した五角形を表示
    function drawChartFoundation(){
      // 中心からの距離ごとに五角形をつくる
      var distance = [1,50,100,150,200];
      for(var i=0; i<distance.length; i++){
        document.getElementById("chart_foundation_pentagons").appendChild(createPentagons(distance[i]));
      }
    }
    
    window.onload = drawChartFoundation;
[/code]

[code]

    #svg_container{
        width:600px;
        height:450px;
        margin:auto;
    }
    
    #chart_container{
        width:500px;
        height:500px;
        display: block;
        margin: auto;
    }
    
    #chart_foundation_pentagons {
        fill:none;
        stroke: #7ac5e9;
        stroke-width:1px;
        stroke-dasharray:3px;
    }
[/code]

[code]

    <div class="svg_container">
    <svg id="chart_container">
      <g id="chart_foundation_pentagons"></g>
      <g id="chart_Polygon"></g>
      <g id="marker_points_wrap"></g>
    </svg>
    </div>
[/code]


CC BY-SA 3.0
2018-01-31T07:53:19.273
41345
2018-01-31T08:36:19.090
2018-01-31T08:36:19.090
19110
19110
41344
answer