[JS]スクリプトだけでアニメーションするグラフ・チャートを実装する -Elycharts

サイト構築 -JavaScript

Post on:2011年8月1日

Elychartsのデモ

まずは、そのインタラクティブなデモからご紹介。

デモ：折れ線グラフ
アニメーションでツールチップを表示します。

デモ：折れ線グラフ
「Re-generate」ボタンをクリックすると、アニメーションでグラフを生成します。

デモ：折れ線グラフミックス
縦のラインがアニメーションで移動します。

デモ：棒グラフ
シンプルな棒グラフ。

デモ：ミックスタイプ
折れ線グラフと棒グラフのミックスです。

デモ：パイチャート
ハイライトのアニメーションが楽しいです。

デモ：ドーナツチャート
ドーナツ型のチャートです。生成時のアニメーションも楽しいです。

デモ：マルチプルパイチャート
パイチャートを組みあせたものです。

Elychartsの実装

外部ファイル

「jquery.js」とベクターグラフィックを扱うスクリプト「raphael.js」と当スクリプトを外部ファイルとして指定します。

  <script src="jquery.js" type="text/javascript"></script>
  <script src="raphael.js" type="text/javascript"></script>
  <script src="elycharts.js" type="text/javascript"></script>

HTML

HTMLは空の容器をdiv要素で配置するだけです。

<div id="chart"></div>

JavaScript

一つ目は、シンプルな折れ線グラフの例で紹介します。

$("#chart").chart({
 type : "line",
 values : {
  serie1 : [27, 93, 87, 27],
  serie2 : [69, 72, 58, 81]
 }
});

グラフの種類を「type」、値を「values」に指定します。
上記の指定では、下記のようなシンプルな折れ線グラフが実装されます。

シンプルな折れ線グラフの例

[ad#ad-2]

二つ目は、ツールチップとラベルを加えたベーシックな折れ線グラフです。

$("#chart").chart({
 template : "line_basic",
 tooltips : {
  serie1 : ["a", "b", "c", "d"],
  serie2 : ["a", "b", "c", "d"]
 },
 values : {
  serie1 : [31, 10, 94, 98],
  serie2 : [43, 99, 44, 42]
 },
 legend : {
  serie1 : "Serie 1",
  serie2 : "Serie 2"
 }
});

ツールチップの値を「tooltips 」、ラベルを「legend 」に指定します。