入門

Chart.jsを使い始めましょう！

まず、ページにcanvas要素が必要です。

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

canvasを使用できるようになりましたので、次はChart.jsをインクルードします。

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

さて、これでグラフを作成することができます。ページに次のスクリプトを追加します。

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // 作成したいチャートのタイプ
    type: 'line',

    // データセットのデータ
    data: {
        labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        datasets: [{
            label: "初めてのデータセット",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },

    // ここに設定オプションを書きます
    options: {}
});

(訳注: JSFiddle)

このようにChart.jsを使い始めるのは簡単です！ここからは、スケール、ツールチップ、ラベル、色、カスタムアクションなどの、チャートをカスタマイズするのに役立つ多くのオプションを調べてみましょう。

Chart.jsの使用例はたくさんあります。各リリースのChart.js.zipの/samplesフォルダ内にあります。(訳注: Web上で見ることもできます。)