以下のコードを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>
allPentagonPoints
が定義されていないのですが、コピペミスでしょうか?