Chart.jsをGettingしてStartedする

JSで図を描写するライブラリはいくつかありますが、Canvas要素ベースのChart.jsとSVG要素ベースのd3.jsが目につきました。どっちを先にやるか迷いましたが、Three.jsでCanvas要素に触れ始めているので3Dと2Dの比較として触ってみることにしました。

※目次：

※参考：JSライブラリとは？
【卒jQueryへの道】生JSとライブラリとフレームワークの理解 - クモのようにコツコツと

Chart.jsの公式サイト

まずは、公式サイトに行って見た。うーむ、英語。。
左メニューに「Getting Started」とう文字が見える。さっそくGettingしてStartedしようじゃないか。

※参考： Getting Started · Chart.js documentation

Chart.js本体ファイルの読み込み

Getting StartedページにあるコードをCodePenに貼ってみたい。

まずはChart.jsの本体ファイルを読み込むために「JS」の「Setting（歯車アイコン）をクリック。「Quick-add」の中にはないようなので「Chart.js」で検索。CDN、ありました！

<!--CodePen以外は下記を配置-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

さあ、準備完了！さっそくコードを貼ってみよう。

コードを貼ってみる

実際に貼ってみた。

おお！？下からニョキっと曲線の折れ線グラフが出てきたぞ！アニメーションになってるのか。

HTMLはこの1行！

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

canvas要素に#myChartってid名が付いてるだけ。

そしてCSSはなし！あとは全てJSに書いてあるようだ。

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },

    // Configuration options go here
    options: {}
});

コード量、そんなに多くないですね！ちょっと順番に見ていきますか。

JSを読み解く

まず最初の行

var ctx = document.getElementById('myChart').getContext('2d');

変数ctxに、DOMで#myChartと紐付けて 、そのあとにgetContext()メソッドが続いている。これはChart.jsにあらかじめ定義されたメソッドですね。

コンテキストは「文脈」みたいな意味のようだが引数2dで2Dオブジェクトだと指定しているようだ。

次の行からは一かたまりになっているので、外側からみていきましょう。

var chart = new Chart(引数1, 引数2);

まず変数chartにnewでChartオブジェクトをインスタンス化（複製）しています。 このChartオブジェクトもChart.jsの中にあらかじめ定義されているものです。中には引数が２つ入っています。

※参考：【JS】newとプロトタイプとクラス - クモのようにコツコツと

次に引数の中をみていきましょう。

var chart = new Chart(ctx, {
//連想配列
キー: 値,
キー: 値,
キー: 値,
});

まず、第一引数に先ほどの変数ctxが入ります。第二引数には連想配列が続きます。 ctxの中の連想配列設定をここで上書きしていくのでしょう。

※参考：連想配列とは
【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 - クモのようにコツコツと

では、連想配列をみていきましょう。

    // The type of chart we want to create
    type: 'line',

まず、typeキーの値をlineにしています。上のコメントをGoogle翻訳すると「作成したいチャートのタイプ」とある。線グラフにしたんですね。

次の行

    // The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },

連想配列が入れ子になってますねー。上のコメントを訳すと「データセットのデータ」とある。

• 一番上の親：dateキー。その中に子の連想配列が入っている。
• 子の一つ目：labelsキーで値は配列で月名が入ってますね。
• 子の二つ目：datasetsキーで、その中に孫の連想配列が入っている。
• 孫の一つ目：labelキーで値は文字列"My First dataset"。これは上にある図のキャプションだ。
• 孫の二つ目：backgroundColorキーで値はRGBの数値。これは線の下部分の赤い背景色ですね。
• 孫の三つ目：borderColorキーで値はRGBの数値。赤い線の色ですね。
• 孫の四つ目：dataキーでこれがデータの数値が配列で入っている。

次の連想配列を見ましょう。これで最後です。

    // Configuration options go here
    options: {}

コメントを訳すと「設定オプションはこちらになります」。御意。 optionsキーですが値は空ですね。波括弧{}なのでここにも連想配列を追加できます。

まとめ

ということで全体的には「変数ctcにcanvas要素#myChartを紐づけて、2Dコンテキストにしている。
そしてchartインスタンスでctcに月名、キャプション、色、データの数値を反映している。
オプションはなし。」といった内容が書いてあります。
下からニョキっとでてくるモーションについては言及がないので、標準仕様なのかな。

無事にChart.jsをGettingしてStartedできたので、次はこの数値をいくつか打ち替えて動きをみようと思います。
それではまた。