グラフの表示

このページでは、Chart.jsグループのブロックを使って、Webページ上にグラフを表示する基本的な手順を解説します。

コンテキストの初期化

まず、グラフ表示用のcanvas要素を元に、コンテキストを初期化し、変数に代入します。
それには、「Web」→「Chart.js」→「基本」グループの中の「コンテキストを初期化」のブロックを使います。
パラメータとしてcanvas要素を渡します。
また、初期化したコンテキストは変数に代入します。

例えば、こちらのページの最後の手順のように、開いたWebページを変数winに代入したとします。
また、そのWebページの中に、ID属性が「myChart」のcanvas要素があるとします。
そして、初期化したコンテキストを、変数ctxに代入するとします。
この場合、以下のようにブロックを組みます。

グラフを変数にセット

次に、変数にグラフをセットするブロックを配置します。
「コンテキスト」のパラメータには、先ほど初期化しておいたコンテキストの変数を渡します。
「種類」のパラメータでは、グラフの種類を選択します。
グラフは後で操作することもありますので、変数に代入します。

例えば、初期化したコンテキストを、変数ctxに代入してあるとします。
また、棒グラフを表示したいとします。
そして、グラフを変数chtに代入するとします。
この場合、以下のようにブロックを組みます。

グラフの表示

ラベルの設定

グラフの横軸の目盛りにラベルを付けることができます。
これは、グラフを表示するブロックの「ラベル」のパラメータで指定します。
このパラメータには、個々の目盛りに表示する文字列をリストにしたものを渡します。
例えば、横軸の目盛りに「1」「2」「3」のラベルを表示する場合だと、以下のようにブロックを組みます。

データの設定

グラフに表示するデータ群のことを、データセットと呼びます。
グラフを表示するブロックの「データセットの作成」のブロックに「系列」のブロックをドラッグし、その「データ」のパラメータで、表示するデータを指定します。
データは数値のリストの形にします。
また、「ラベル」のパラメータで、系列の名前を指定します。
さらに、枠の色などのパラメータを設定することもできます。
1つのグラフに複数の系列を表示したい場合は、「データセットの作成」のブロックの左上にある歯車のアイコンをクリックして、「系列」のブロックを「データセット」の中にドラッグすることで、系列の数を増やすことができます。

例えば、以下のようにブロックを組んだとします。

このブロックからは、以下のようなグラフが表示されます。

サンプルファイル

ここまでのサンプルファイルは、こちらからダウンロードすることができます。
なお、このサンプルを試すには、以下の手順でチャート表示用のHTMLを用意します。

Tsumickyのインストール先フォルダの中に、「html」という名前のフォルダを作ります。
こちらのページにあるHTMLの例をコピーします。
chart.htmlというファイル名を付けて、前述のhtmlフォルダの中に保存します。

« 前のページ：HTMLの用意と表示