Chart APIを使ってみた

Movable Type 6には、JavaScriptでグラフを描画する「Chart API」も追加されます。
Chart APIの基本的な使い方を紹介します。

1.Chart APIの概要

Chart APIは、グラフを表示するための汎用的なJavaScriptライブラリです。
グラフ描画ライブラリのMorris.jsと、Canvas描画ライブラリのEasel.jsをベースにしています。

Movable Type 6に同梱される形を取っていますが、Movable Type 6には依存していない汎用的なライブラリです。
したがって、Chart APIを単体で使うこともできます。
とはいえ、Movable Type 6に同梱されるからには、Movable TypeのテンプレートやData APIと組み合わせて使いたいところです。

2.Chart APIのJavaScriptとCSSを組み込む

まず、グラフを表示したいページのHTMLに、以下のタグを組み込みます。
「your_host」と「path_to_chartapi」は、Chart APIのインストール先に応じて変えます。
また、jQuery（1.9.1以上）もCDN等から組み込みます。

<link rel="stylesheet" href="http://your_host/path_to_chartapi/mtchart.css">
<script src="http://・・・/jquery.min.js"></script>
<script src="http://your_host/path_to_mtstatic/path_to_chartapi/mtchart.min.js"></script>

Movable Type 6をインストールしていて、テンプレートの中でChart APIを使うなら、テンプレートに以下のような部分を入れると良いです。

<link rel="stylesheet" href="<$mt:StaticWebPath$>chart-api/mtchart.css">
<script src="<$mt:StaticWebPath$>jquery/jquery.min.js"></script>
<script src="<$mt:StaticWebPath$>chart-api/mtchart.min.js"></script>

3.グラフの描画先の要素を作る

次に、div要素等を使って、グラフの描画先にする要素をHTMLに入れます。
要素にはid属性を指定します。
また、CSSのwidthプロパティで幅も指定します。

例えば、idが「chart」というdiv要素を作り、幅を500ピクセルにするとして、そこにグラフを表示するとます。
この場合、HTMLに以下の部分を追加します。

<div id="chart" style="width: 500px"></div>

4.グラフを描画する

グラフを描画するには、HTMLに以下のようなJavaScriptを追加します。

new MT.ChartAPI.Graph(config, range).trigger('APPEND_TO', $('#グラフ描画要素のid属性の値'));

MT.ChartAPI.Graph関数の1つの目のパラメータ（config）で、グラフの元になるデータや、描画方法などを指定します。
また、2つ目のパラメータ（range）では、グラフ化するデータの範囲や、形式（一般的／時系列）などを指定します。
データの指定方法は、Chart APIのリファレンスのページを参照してください。

5.事例

ごく簡単な事例として、棒グラフを表示するものを作ってみました。
こちらのページでご覧いただくことができます。

お知らせ