Technology/Chart.js

01

Chart.jsとは?

JavaScriptのオープンソースライブラリで、簡単に色んな種類のグラフが描けちゃう優れものです。 JavaScriptってなんじゃらほい?って方もいると思いますが、簡単に言うとプログラミング言語です。
Javaという言語もありますがこれとは全くの別物。オブジェクト指向のスクリプト言語で、これが慣れるまで厄介なのですが、話し出すと終わらないのでJavaScriptの話はこの辺で。
Chart.jsバージョン2.8.0の時点では8種類のグラフが描けるとのこと。
折れ線グラフや円グラフ、棒グラフのようなおなじみなものから散布図や鶏頭図なども簡単にできます。 さらに色などのカスタマイズの自由度も高く、自動でつく各グラフに合わせたアニメーションがあるのもポイントです。

Chart.js
  • Open source

  • 8 Chart types

  • HTML5 Canvas

  • Responsive

02

活用ポイント/方法

結論から言うとプロジェクトのWebサイトで表示されているグラフは全てChart.jsを使い描かれています。
またプロジェクトページトップの動いているグラフも。
JavaScriptと組み合わせることで、グラフを状況によって変えてみたり色んなことができそうです!

さてさてコーディングの例をあげると、上の棒グラフは以下のようなHTMLで表示することができます。

まず<canvas>タグでグラフのIDを指定します。

<canvas id="myChart"><canvas/>

次にChart.jsのファイルを読み込みます。
Chart.jsの公式GitHubからダウンロードしている場合はこんな感じ。

<script src="Chart.min.js"><script/>

そして最後に<script>タグでグラフ自体を作成します。
グラフを<script>タグで直接HTMLに書き込む場合はグラフの前にChart.jsを先に読み込まないと表示されないことに注意しましょう。僕も最初ハマりました(汗)。
棒グラフの場合はtype: 'bar'を指定。
またoptionsに色んな値を値を指定することで、どんなグラフでも表現できるようになります。

                    
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["赤", "青", "黄色", "緑", "紫", "橙"],
        datasets: [{
            label: '得票数',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
<script/>