0

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

コードの出典: ”インラインSVG”を使ってレーダーチャートを作ってみよう! -- キャスレー技術ブログ

<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>

2
  • ご提示のソースコードでは allPentagonPoints が定義されていないのですが、コピペミスでしょうか?
    – nekketsuuu
    Commented 2018年1月31日 7:46
  • また、JavaScript の関数が定義されているものの、いつ実行されるのかが書かれていないように見えます。これもコピペミスでしょうか?
    – nekketsuuu
    Commented 2018年1月31日 7:46

1 件の回答 1

1

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

// 五角形を生成
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;
#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;
}
<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>

1
  • 有難うございます。チュートリアルをみて試してみたいと思います。
    – tera
    Commented 2018年1月31日 8:14

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。