Chart.js でグラフが表示されないとき

コードをコピペしてもグラフが表示されない

もしかして、1.0 のコードを 2.0 の Chart.js で使っていませんか。

Webで検索すると引っかかるここここここは 1.0 の記載です。

2.0 では記述方法が変わっています。2.0 を使う場合はとにかく公式のリファレンスを見ましょう。

コードを細分化

公式のサンプルコードは全部ひっくるめて詰め込んでいるので、私は data と options は以下のように細分化しています(type も変数に入れていいかもしれません)。

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

まずは最低限の表示確認を

どうしてもグラフが表示されないときは、まずは公式のコードをコピペ、それから徐々にいじりながらカスタマイズしていくというのが定番です。ある程度の段階まで把握できたら上記のように細分化するなどして、CSVのインポートなどから効率よくコードが生成できるようにしてみましょう。

Powered by はてなブログ