8ヶ月前に投稿

DataTables.js の Dataを Highcharts.js に反映させてみる

2020年1月9日

この記事は約 4 分で読めます。

4.5

どう言う事かと言うと、
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.jsHighcharts.js
Option に関しては
割愛させて頂きます。

この記事に表示されている
テーブルとグラフのソースコードは
GitHub のこちらです。

その他、
詳細は以下のリンクを参照してください。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
DataTables.js の Dataを Highcharts.js に反映させてみる