<script src="https://d3js.org/d3.v5.js"></script>
<script>
window.addEventListener("load", function(){
var stage = d3.select("#demo_stage");
var svg = stage.append("svg")
.attr("width",200)
.attr("height",200);
var grid = [
[1,1,1,1,1],[2,2,2,2,2],[3,3,3,3,3],[4,4,4,4,4],[5,5,5,5,5]
];
var dataArr = [
[3,3.5,4,5,3.5]
,[5,4.0,2,3,4.0]
];
var scale = d3.scaleLinear()
.domain([0,5]).range([0,90]);
var line = d3.line()
.x(function(d,i){return scale(d) * Math.sin(Math.PI*2/5 * i) + 100;})
.y(function(d,i){return -scale(d) * Math.cos(Math.PI*2/5 * i) + 100;})
svg.selectAll("path.grid")
.data(grid)
.enter()
.append("path")
.attr("d", function(d,i){return line(d)+"z";})
.attr("stroke", "black")
.attr("stroke-dasharray", "2");
svg.selectAll("path.data")
.data(dataArr)
.enter()
.append("path")
.attr("d", function(d,i){return line(d)+"z";})
.attr("stroke", function(d,i){return i ? "red": "blue";})
.attr("stroke-width", 2);
svg.selectAll("path").attr("fill", "none")
},false);
</script>
<div class="c b1 full gra1">
<div class="t">D3.js</div>
<div class="desc">JSライブラリD3.jsを使ったレーダーチャート</div>
<div id="demo_stage"></div>
</div>
<script src="/js/lib/html5/Chart/Chart.js"></script>
<script>
$(document).ready(function(){
//Get the context of the canvas element we want to select
var ctx = document.getElementById("radar").getContext("2d");
var data = {
labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
datasets : [
{
fillColor : "rgba(220,110,220,0.5)",
strokeColor : "rgba(220,110,220,1)",
pointColor : "rgba(220,110,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
new Chart(ctx).Radar(data);
});
</script>
<div class="c b1 full gra1">
<div class="t">Chart.js</div>
<div class="desc">JSライブラリChart.jsを使ったレーダーチャート</div>
<canvas id="radar" width="320" height="250"></canvas>
</div>