チャート作成ライブラリーelycharts.jsの紹介

JavaScript

この記事を書いたチーム：frontier

チャート作成ライブラリーelycharts.jsの紹介株式会社Smallit　技術ブログ　JavaScript

elycharts.jsの概要
elycharts.jsで作成できるチャートの種類
Elycharts.jsでチャートを作成してみよう

elycharts.jsの概要

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc.　　詳細はこちらから＞

elycharts.jsはチャート作成するためのライブラリであり、純粋なJavaScriptで、クライアントPCのブラウザーで動作させるには、FlashやJavaなどのプラグインをクライアント側にインストールする必要がありません。また、オープンソースであり、商用目的でも無料で使用できます。

ソースファイルは公開されており、下記のURLからダウンロードできます。

https://elycharts.com/download

elycharts.jsで作成できるチャートの種類

折れ線チャート
面チャート
円チャート
棒チャート
ドーナツチャート
折れ線と面の組み合わせのチャート

など、基本的によく使われているチャートは、elycharts.jsで表現できます。

Elycharts.jsでチャートを作成してみよう

１．jspまたはhtmlファイルのヘッダーに必要な外部スクリプトをインポートする。

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

<head>

...

  ...

</head>

２．実装部分のソースの書き方。

すべてのチャートはHTMLコンテナータグで囲まなければなりません。（通常<DIV>タグを使用する）

例：

<div id="chart"></div> 
<script type="text/javascript"> 
  $("#chart").chart({ 
 type : "line", 
 values : { 
  serie1 : [60, 90, 40, 55, 78], 
  serie2 : [10, 71, 49, 80, 70] 
 } 
}); 
</script>

  $("#chart").chart({

 type : "line",

 values : {

  serie1 : [60, 90, 40, 55, 78],

  serie2 : [10, 71, 49, 80, 70]

 }

});

</script>

jQuery関数”chart”を実行されると、上記のチャートが描かれます。

３．パラメータの説明（一部のみ）

パラメータを設定することで、チャートの表現が豊かになります。

type:チャートの種別

　　line：折れ線チャート
　　pie：面チャート
　　funnel：ファンネルチャート
　　barline：棒チャート

labels：X軸のラベル

tooltips：折れ線にフォーカス時表示される内容

values：Y軸の値

margins：チャート表示領域の余白、順番は[top, right, bottom, left]になります。
features：細かい項目をソースファイルにご参照ください。
この項目では、縦横グリッド線の本数、グリッド線の表示・非表示、終端グリッド線の有無、グリッド線のスタイル（色、太さなど）、凡例のスタイルなどを設定できます。

例：下記のコードであるチャートを定義します。

$("#chart").chart({ 
 type : "line", 
 labels : ["A", "B", "C", "D"], 
 tooltips : { 
  serie1 : ["a", "b", "c", "d"], 
  serie2 : ["a", "b", "c", "d"] 
 }, 
 values : { 
  serie1 : [100, 2, 101, 50], 
  serie2 : [5, 10, 80, 200] 
 }, 
 margins : [10, 10, 20, 50], 
 series : { 
  serie1 : { 
   color : "red" 
  }, 
  serie2 : { 
   color : "green" 
  } 
 }, 
 defaultAxis : { 
  labels : true 
 }, 
 features : { 
  grid : { 
   draw : true, 
   forceBorder : true 
  } 
 } 
});