Chart.js로 레이더 차트 만들기

개요



Chart.js로 레이더 차트 만들기

샘플


<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Qiita Scouter - Radar Chart</title>
  <script src="Chart.min.js"></script>
  <script language="JavaScript"><!--
  function displayPieChart() {
    var data = {
        labels: ["攻撃力", "知力", "すばやさ"],
        datasets: [
            {
                label: "Qiita Scouter",
                fillColor: "rgba(200,0,0,0.2)",
                strokeColor: "red",
                pointColor: "red",
                pointStrokeColor: "red",
                pointHighlightFill: "red",
                pointHighlightStroke: "red",
                data: [10780, 87010, 3927]
            }
        ]
    };
    var ctx = document.getElementById("radarChart").getContext("2d");
    var options = { };
    var radarChart = new Chart(ctx).Radar(data, options);
  }
  --></script>
</head>
<body onload="displayPieChart();">
  <div class="box">
    <canvas id="radarChart" height="450" width="450"></canvas>
  </div>
</body>
</html>



외부 자료



  • Chart.js docs
  • 좋은 웹페이지 즐겨찾기