jqueryを使ってtableを簡単にグラフ化してくれるプラグイン「jQuery HighchartsTable」を使ってみました。

「jQuery HighchartsTable」を使えば、以下の様なグラフをtableから簡単に生成してくれます。

WS000015
WS000016
WS000017

「jQuery HighchartsTable」のusageでは、以下の様にファイルを読み込めば使えると記述されています。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="jquery.highchartsTable.js"></script>

3つのファイルを読み込む必要があります。

jquery本体はいいとして、「highcharts.js」と「jquery.highchartsTable.js」の二つをダウンロードしなければなりませんがこの二つは別々の場所からダウンロードします。

highcharts.jsのダウンロード

jquery.highchartsTable.jsのダウンロード

ここでちょっと罠というか、スペルミスがあって実際にダウンロードされるファイルは jquery.highchartTable.js なのに対し読み込む記述のサンプルは

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

と記述されています。

jquery.highchartsTable.js

」が抜けているのでファイル名を jquery.highchartsTable.js に変更してあげましょう。

サンプルを以下に用意しました

jQuery HighchartsTableのサンプル

詳細は以下から

jQuery HighchartsTable

以下のサイトを参考にさせて頂きました。

テーブルをグラフに変換してくれるjQueryプラグイン