JavaScript/jQuery グラフ

tableデータから棒グラフを描画できるjQueryプラグインTableBarChartを使ってみる

更新日:

スポンサードリンク

グラフを作成することについて

既存のtableデータから簡単に棒グラフの作成できるTableBarChartというプラグインを試してみました。

棒グラフといえば通常でしたら恐らくエクセルなどの表計算ソフトを使って作成するのではないかと思いますが、このプラグインはそれをしないでわざわざjavascriptを利用してグラフを描くという行為に及んでいます。

この主なメリットは何かというと従来のグラフ画像とは違ってグラフを動的に作成できるという点です。

ここでいう動的とは対象となる数値がページ読み込みの際などに変動するものということやまた、グラフ生成などにアニメーションが付けられるということ、ボタンを押したときなど指定のイベントでグラフを作成できるなどということです。その他にもグラフ自体に数値を示すポップアップが付くなどの利点もあります。

一つ注意すべきなのは既存のテーブルにこれを使ってグラフを描画しようと思った場合テーブルはそのままでは駄目で、決まったタグを入れたりする必要があります。

使い方

GitHubで公開されていますので
TableBarChart.jsとTableBarChart.cssをそちらからダウンロードしてください。本家ページはこちらです。

詳細やQ&Aが載っているので気になる方は見た方がいいです。

まずはテーブルタグを用意します。
ここで注意すべきことが5つあります。

  1. 冒頭のcaptionタグの後のthタグを入れる列はthreadタグで挟むことが必須
  2. 上記のthreadタグ内の冒頭は空のthタグを入れなければならない
  3. データを記述する部分はtbodyタグで挟まなければならない
  4. データを記述する部分の行の冒頭は必ずthタグでタイトルを付ける
  5. データそのものは全てtdタグで囲わなければならない

下に本家ページのサンプルを例として載せたのでこちらでも確認してください。

<table id="source">
<caption>Locating Element By Id</caption>	<!-- 任意 -->
<thead>	<!-- ①必須 -->
<tr>
<th></th>	<!-- ②必ず空のthタグを入れる -->
<th>Run 1</th>
<th>Run 2</th>
<th>Run 3</th>
</tr>
</thead>
<tbody>	<!-- ③必須 -->
<tr>
<th>Chrome</th>	<!-- ④trタグの始めのセルは必ずthタグ -->
<td>1595</td>	<!-- ⑤データセルは必ずtdタグを使う -->
<td>1578</td>
<td>1584</td>
</tr>
<tr>
<th>Firefox</th>
<td>1470</td>
<td>1430</td>
<td>1500</td>
</tr>
<tr>
<th>Internet Explorer</th>
<td>2750</td>
<td>3140</td>
<td>3162</td>
</tr>
<tr>
<th>HTMLUnit with JS</th>
<td>170</td>
<td>100</td>
<td>90</td>
</tr>
</tbody>
</table>

グラフ描画対象先

<div id="target" style="width: 600px; height: 400px">
</div>

jQueryを含む用意する外部スクリプトおよびCSSを先ほどのダウンロード先で入手してきてください。

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="TableBarChart.css" />
<script type="text/javascript" src="TableBarChart.js"></script>

実際に描画するスクリプト。
#sourceはtableについているIDでグラフ化したいテーブル要素を指定します。
tableBarChartメソッドの引数は左からグラフ描画先の要素、上書きしたい場合のタイトル、列か行どちらをグループ化するかの真偽となっています。タイトルはcaptionタグで記述したものが表示されますが、二つ目の引数を指定した場合はその文字列がタイトルとなります。

<script type="text/javascript">
$(function() {
$('#source').tableBarChart('#target', '', false);
});
</script>

デモ

Locating Element By Id
Run 1 Run 2 Run 3
Chrome 1595 1578 1584
Firefox 1470 1430 1500
Internet Explorer 2750 3140 3162
HTMLUnit with JS 170 100 90

グラフ描画対象タグ

<div id="target1" style="width: 520px; height: 400px">
</div>
<div id="target2" style="width: 520px; height: 400px">
</div>
<div id="target3" style="width: 300px; height: 400px">
</div>

スクリプト

<script type="text/javascript">
$(function() {
$('#source').tableBarChart('#target1', '', false);
$('#source').tableBarChart('#target2', '第3引数をtrueに', true);
$('#source').tableBarChart('#target3', '横サイズ変更', false);
});
</script>

最後に色の変更について

棒グラフの色についてはCSSを変更する、もしくは、別のCSSで上書きすることで変更することができます。
各棒には左から0からはじまる"item-○"(○には数字が入る)というクラスが付与されており、配布されているCSSにはbackgroundで色が指定されているので、例えば左から3つ目の棒の色を赤色にしたい場合は

.item-2{
background: red;
}

というものをTableBarChart.cssの読み込み指定のタグの後に記述すれば変更できます。

スポンサードリンク

-JavaScript/jQuery, グラフ

Copyright© めめんと , 2019 All Rights Reserved Powered by AFFINGER5.