Chart.jsを使ったグラフ表示をやってみる(PHP+Ajaxによるグラフ再描画)

Chart.jsはHTML5のcanvas要素を使ったグラフ表示を行うjQueryライブラリです。シンプルなグラフが6種類用意されていて、オプションもそれなりに充実しています。

今回はChart.jsを使ったグラフ表示と、利用シーンがあるか分かりませんが、PHP+Ajaxを使った非同期のグラフの再描画もやってみたいと思います。

まずはデモページで動かしてみてください。

デモページ

Chart.jsを使ったグラフ表示

まずはChart.jsの準備です。下記のサイトからGitHub経由でダウンロードします。必要なのは「Chart.js」もしくは「Chart.min.js」です。

Chart.js

ダウンロードできたら、そのライブラリを読み込みます。

準備ができたので、コードを書いていきます。

HTML

Chart.jsはcanvas要素を使ってグラフを描画します。そのためHTMLとしてはcanvas要素を用意します。

width属性とheight属性でグラフの表示領域を決めておきます。

グラフの表示

あとはjavascriptを書いてグラフを表示するだけです。

Chart.jsを使うために、まずはcanvas要素の2Dコンテキストを取得します。

次にグラフのためのオプションを用意します。Chart.jsはグローバルオプションとグラフの種類ごとにオプションが用意されています。各オプションについてはChart.jsサイトのDocumentationを見てください(英語です)。

Chart.jsはレスポンシブなグラフ表示ができます。レスポンシブにするにはグローバルオプションのresponsive属性をtrueにします。デフォルトはfalseで、レスポンシブではなく、canvas要素の表示領域に従います。グローバルオプションは「Chart.defaults.global.オプション名 = 値」と指定します。

今回は折れ線グラフを表示しますので、折れ線グラフのオプションを用意します。

オプション名とサイトの説明で何となくどういったオプションか分かると思います。いろいろ変えて確かめてください。

次はデータの用意をします。

ここまで準備出来たらグラフオブジェクトを生成します。生成と同時に描画されますので、次の1行でグラフ表示は終了です。

chart1

グラフの再描画

デモ用に非同期でグラフの再描画をやりたかっただけなので、ここから先はおまけです。

グラフ再描画の方法ですが、まずはChart.jsで作ったグラフオブジェクトのデータを更新する必要があります。以下のようなコードを書きます。

Chart.jsでは1つのグラフ領域に複数のグラフを表示できます。datasets[0]はその何番目のグラフかを表します。最初のグラフは0です。datasets[0].points[2]は、グラフのノードです。この場合は最初のグラフの3番目のノードということになります。最後にvalue属性で指定したノードのデータ値を書き換えています。

次に、Chart.jsでは再描画のための関数が用意されています。update()関数です。

この関数を実行すればグラフが再描画されます。

PHP+Ajax

今回はjQueryの$.ajax関数を使い、JSON形式でPHPと非同期通信を行います。まずは呼び出し側のPHPに書くjQuryです。

次に、呼び出される側のPHP全文です。

これで非同期通信によるグラフ描画ができました。

選択されたグラフのノードを取得する

これは本当にただのおまけでデモでも使っていませんが、グラフの選択されたノードの情報を取得することができます。選択されたというのは、グラフのノード付近にマウスを近づけるとノードの色が変わってツールチップが出ると思います。その状態のノードです。

Chart.jsは見た目がシンプルですがその分見やすいので、どこかで使えそうです。デザインのカスタマイズや他のグラフについてもそのうちやってみたいですね。

広告
  • LINEで送る