Chart.jsというグラフを描画してくれるライブラリ

chart.jsというグラフを表示してくれるライブラリを使用したのですが、とっても簡単に実装できました！

その手順をメモしておきます。

chart.jsとは

グラフを簡単に書くことができる、javascriptのライブラリです。

折れ線グラフ・棒グラフ・円グラフ・レーダーチャートなど、色々な種類のグラフを書くことができます。

以下はそのリンクです！

www.chartjs.org

準備

グラフを描画したいページの下部に、CDNでchart.jsを読み込みます。

準備は以上です！

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

使い方

実際に使いたい形のグラフのコードをコピペし、データを実際に渡したいデータに書き換えます。

下の例では、lavelsの値とdataの値を書き換えています。

<h2>ラベル別使用回数</h2>

<div style="width: 80%">
  <canvas id="chart" height="450" width="600"></canvas>
</div>

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

<script>
  var barChartData = {
    labels : gon.lavels,
    datasets : [
      {
        fillColor : /*"#d685b0"*/"rgba(214,133,176,0.7)",
        strokeColor : /*"#d685b0"*/"rgba(214,133,176,0.7)",
        highlightFill: /*"#eebdcb"*/"rgba(238,189,203,0.7)",
        highlightStroke: /*"#eebdcb"*/"rgba(238,189,203,0.7)",
        data : gon.data
      },
    ]

  }
  window.onload = function(){
    var ctx = document.getElementById("chart").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
      responsive : true,
    });
  }
</script>