1. Qiita
  2. 投稿
  3. Visualization

Chart.js v2.0 で時系列グラフの描画

  • 9
    いいね
  • 0
    コメント

始めに

時系列グラフ(time series chart)とは文献1で冒頭に明記されているよに、下記の特徴をもった折れ線グラフです

  • データは x軸上で等間隔ではない
  • x軸 のラベルはデータとは無関係

下のグラフ(Chart.js v2.0 の sample です)で、青い実線と破線が通常の折れ線グラフ、 灰色の線が時系列グラフです

スクリーンショット 2016-02-05 18.06.50.png

きれいなグラフが手軽にかける Chart.js ですが、これまで時系列グラフとか散布図とかがなく、v2.0 のロードマップでした(

プラグインとしてつくっておられる方はいました

現在 beta-2で上記のように時系列グラフの描画がうごいているようですので、僭越ながらその旨こちらでご報告させていただきます次第です

2016.05.02 補足:
V2.0 リリースされたみたいですね

時系列グラフのサンプルプログラムの実行する際の注意

chart.js の github で v2.0-dev を選択して

スクリーンショット 2016-02-05 17.56.00.png

Zip をダウンロードして
スクリーンショット 2016-02-05 17.56.25.png

samples の html を適当に選んでブラウザで開くとみなキレイなグラフをかいてくれるのですが

スクリーンショット 2016-02-05 17.58.21.png

timeScale フォルダ配下の html、例えば line-time-scale.html を開くと下記のように真っ白なキャンパスが描画されるだけです

スクリーンショット 2016-02-05 17.58.34.png

デバッガでみてみると moment.js がない事が原因のようです
スクリーンショット 2016-02-05 17.59.17.png

ソースを見ると node_modules 配下の moment.js を使っています
スクリーンショット 2016-02-05 18.00.10.png

そこで、以下のいずれかの方法で moment を用意します(1. が普通だとは思いますが... なんか事情があるのなら 2. でも OK)

  1. chart.js の root directory で npm install
  2. moment.js をダウンロードしてきて、それを使うようにサンプルプログラムを変更

すると、冒頭のキレイなグラフが描画されます
スクリーンショット 2016-02-05 18.06.50.png

恥ずかしい話しなのですが、しばらくこれに気がついていなくて、time series はまだなのかな〜、とか勘違いしてました ^^;

v1.0 からの変更点

時系列グラフが moment.js に depend している他、私が気がついた範囲でv1.0 からいろいろな変更点があるようです。

  1. v1.0 では Chart を new して、Chart の Line メソッドでグラフを描画していたが、v2.0 では Chart を new する際の configパラメタでグラフの種別を指定し、new のタイミングで描画。Line メソッドはもうない

  2. 動的に変化する Chart を書く際、v1.0 では chart.datasets の point と、chart.scales を書き換えることでもできていましたが(普通は addData, removeData を使うのでしょうけど一気に全部書き換えたい時に上の方法は便利でした)、それらの場所がchart.config.data 配下に変わっている

変更点一覧は現時点ではドキュメントにまとまっていないようですが、それを用意することが v2.0 の issue に上がっているようです

references

  1. New chart type: Time Series #1059 feature の定義
  2. Chart.Scatter plugin として提供されていました
  3. 2.0.0-beta2 昨年暮れにリリースされました
  4. momentjs moment.js の本家です
  5. Moment.jsを使う moment.js の大変分かりやすい記事
  6. Any docs on how to migrate from version 1 to 2.0(beta)? 変更ドキュメントないじゃん!という issue
Comments Loading...