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

ユーザーのマウス操作に会わせて、ハイライトやツールチップをアニメーションで表示する折れ線グラフ、棒グラフ、パイチャートなど、インタラクティブなグラフを簡単に実装するjQueryのプラグインを紹介します。

サイトのキャプチャ

Elycharts

[ad#ad-2]

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 」に指定します。

デモのキャプチャ

ツールチップとラベルを伴った折れ線グラフの例

sponsors

top of page

©2018 coliss