DataTables.js の Dataを Highcharts.js に反映させてみる
この記事は約 4 分で読めます。
どう言う事かと言うと、
DataTables.js を使った
HTML table のデータを
Highcharts.js に
表示すると言うものです。
DataTables.js とは、
HTMLのtable要素に
ページングやソート機能を
付ける事の出来る
JavaScriptライブラリです。
そして、
Highcharts.js ※ は
チャートを表示する
JavaScriptライブラリです。
※ 商用サイトの場合はLicenses を
取得する必要があります。
先ずは以下をご覧ください。
上記ライブラリを使って
愛猫ルナの血液検査結果の
RBC (赤血球) と Hgb (ヘモグロビン) の
Dataを表とグラフにしたものです。
Date | RBC level (10⁶/㎕) | Hgb level (g/dL) |
---|---|---|
Day 1 | 5.1 | 7.8 |
Day 2 | 4.9 | 7.4 |
Day 3 | 4.76 | 7.2 |
Day 4 | 4.49 | 6.7 |
Day 5 | 4.51 | 6.7 |
Day 6 | 3.82 | 5.4 |
Day 7 | 3.50 | 5.1 |
上記が、
DataTables.js と
Highcharts.js を使用して
Dataを表示させたものです。
テーブルの Date の横にある
▲ をクリックすると
データがソートされますが、
それに準じてチャートの
Dataもソートされます。
以下の CodePen を
参照してください。
See the Pen Data Visualization With DataTables.js and Highcharts.js by Envato Tuts+ (@tutsplus) on CodePen.
数ヶ所つまずきましたが、
上記 CodePen のソースで
上手くいくと思います。
必要なライブラリは、
注:DataTables.js は jQuery プラグインであるため、
jQuery をプロジェクトに追加する必要がありました。
ただし、Highcharts.js は純粋な JavaScript ライブラリであるため、
jQuery を必要としないことに注意してください。
必要なデータを取得するために、
DataTables APIを利用する関数で
少し変更しました。
function getTableData(table) {
const dataArray = [],
countryArray = [],
populationArray = [],
densityArray = [];
// loop table rows
table.rows({ search: "applied" }).every(function () {
const data = this.data();
countryArray.push(data[0]);
populationArray.push(Number(data[1]));
densityArray.push(Number(data[2]));
});
// store all data in dataArray
dataArray.push(countryArray, populationArray, densityArray);
return dataArray;
}
チャートの作成に関して、
Highcharts.setOptions
で
lang.thousandsSep
を
設定しているのはなぜ?
Highcharts.setOptions({
lang: {
thousandsSep: "," } });
ツールチップで
表示される数値を
カンマ区切りの
値で表示するためのようです。
DataTables.js と Highcharts.js の
Option に関しては
割愛させて頂きます。
この記事に表示されている
テーブルとグラフのソースコードは
GitHub のこちらです。
その他、
詳細は以下のリンクを参照してください。
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
秘密の抜け道を通って(笑)諜報部員参上☆
おお~っ!
こちらのブログはカラクリ仕掛けが強化されてますね~♪
え~い!
これを含めて突破だぁ~♪
エキスパートの技、ソフトが見えないようにコンパイル等して一般の方が使えるようにすると面白いと。
おはようございます。
諜報活動お疲れ様です。
アハハ!
カラクリ仕掛け、確かに!
管理人はカラクリに
どっぷり浸かってしまいました(汗