WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

Chart.js

折れ線グラフ、棒グラフ、レーダーチャート、円グラフ、鶏頭図、ドーナツグラフなどを
canvasで作成できるJavaScriptライブラリ

www.chartjs.org

準備

公式サイトからファイルをダウンロードし、「Chart.js」を読みこむ。
CDNもある

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

レーダーチャート

f:id:mmmmofu:20160909112733p:plain

デモはこちら

http://efu.sakura.ne.jp/web/chart/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Chart.js</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
  <style>
    html, body, div, h1, canvas {
     margin: 0;
     padding: 0;
     line-height: 1.0;
     font-family:
       "Hiragino Kaku Gothic ProN",
       Meiryo,
       "san-serif";
    }
    body {
      background: #000;
      color: #FFF;
    }
    h1 {
      text-align: center;
      margin-top: 50px;
    }
    .chart {
      width: 400px;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <h1>レーダーチャート</h1>
  <div class="chart">
    <canvas id="radarChart" height="400" width="400"></canvas>
  </div>
  <script>

  //値
  var chart_data_1 = [1.5, 7, 3, 8.5, 4];

  var data = {
   labels: ["data1", "data2", "data3", "data4", "data5"],//カテゴリー名
   datasets: [
    {
     label: "data",//項目名
     fillColor: "rgba(253,223,111,0.4)",//塗りつぶす色
     strokeColor: "rgba(253,223,111,1)",//線の色
     data: chart_data_1//値
    },
   ]
  };

  var options = {

    //設定
    scaleShowLabels: false,// 目盛を表示
    scaleOverride : true,// 目盛の最大値を手動設定
    angleShowLineOut : true,//中央からラベルへの線の表示
    pointDot: false,// 値の点の表示
    animation: true,// アニメーションさせるか
    showTooltips: false,// hover時のpopup(データの値)の表示

    //中央からラベルへの線
    angleLineWidth : 1,
    angleLineColor : "rgba(114,173,234,.7)",//中央からラベルへの線の色

    //グリッドの線
    scaleLineWidth : 1,//グリッドの線の太さ
    scaleLineColor : "rgba(114,173,234,.7)",//グリッドの線の色

    //目盛
    scaleSteps : 10,// 目盛の数
    scaleStartValue : 0,// 目盛の最初の数
    scaleStepWidth : 1,// 目盛の間隔

    //データの線
    datasetStrokeWidth : 1,//データを囲う線の太さ

    //ラベルの文字
    pointLabelFontFamily : "'Hiragio Kaku Gothic ProN",//ラベルのフォント
    pointLabelFontSize : 12,//ラベルのフォントサイズ
    pointLabelFontColor : "#72adea"//ラベルのフォントカラー

  };

  var canvas = document.getElementById('radarChart').getContext("2d");
  var myChart = new Chart(canvas).Radar(data, options);
  </script>
</body>
</html>

細かく変えたい場合D3.jsが良い
d3js.org