検索
ニュース

JavaScriptで「データを可視化」何を使う？　10種類のライブラリを比較：提供ツールや付加機能、短所、導入／使用方法を解説

CoderPadはJavaScriptでよく使われる10種類のデータ可視化ライブラリを紹介した。ApexCharやChart.js、D3.jsなどを扱う。

Share
Tweet
LINE
Hatena

　コーディング面接に使われるWebサービスなどを手掛けるCoderPadは2022年8月23日（米国時間）、「JavaScript」でよく使われる10種類のデータ可視化ライブラリを紹介した。

　データをビジュアルでグラフィカルなフォーマットに合わせて表示するデータ可視化は、データを分かりやすく、効率的に伝える上で効果的だ。

　紹介されている10種類のライブラリは次の通り。

・ApexChart
・Chart.js
・D3.js
・Techan.js
・AnyChart
・Taucharts
・Zoomcharts
・Canvasjs
・Highcharts
・TOAST UI Chart

　CoderPadはそれぞれについて、提供する可視化ツールの種類や付加機能、短所、導入／使用方法を説明し、コードサンプルを提供している。どのライブラリがベストなのかは、アプリケーションに加え、想定しているユースケースとの統合のしやすさによって決まるという。

ApexChart

　「ApexChart」はオープンソースのグラフライブラリであり、限られたコードで美しくインタラクティブなグラフを作成できる。折れ線や棒、面、円、ローソク足、ヒートマップなど、16種類のグラフをサポートしている。

　ApexChartのグラフはレスポンシブでインタラクティブであり、カスタマイズされたアイコンを使って自動的にレンダリングされる。グラフのズームやデータセットのパン、PNGファイルやSVGファイル、CSVファイルとしてレンダリングされたグラフのエクスポートが可能だ。さらに、選択したデータを読み込む動的グラフも作成できる。10種類以上のテーマパレットでグラフのスタイルを指定することも可能だ。

　ただし、ApexChartのライブラリはかなりサイズが大きく、現在のバージョン（v3.35.4）では約496KBだ。そのため、大きなデータセットを扱う場合、パフォーマンスに問題が生じる。

  • 使用方法

　次のように、ApexChartのCDN（Content Delivery Network）リンクをプロジェクトのマークアップに含めることができる。

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

　npmを使って次のコマンドでインストールすることもできる。

npm install apexcharts

　インストールが完了したら、グラフのスタイルとデータセットを指定したオプションオブジェクトを作成することで、グラフのレンダリングを開始する。ランダムなデータセットを使った面グラフの例を次に示す。

<head>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      var options = {
        chart: {
          height: 280,
          type: "area",
        },
        dataLabels: {
          enabled: false,
        },
        series: [
          {
            name: "Series 1",
            data: [75, 82, 68, 75],
          },
        ],
        fill: {
          type: "gradient",
          gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.7,
            opacityTo: 0.9,
            stops: [0, 90, 100],
          },
        },
        xaxis: {
          categories: ["01 Jan", "02 Jan", "03 Jan", "04 Jan"],
        },
      };
      var chart = new ApexCharts(document.querySelector("#chart"), options);
      chart.render();
    </script>
  </body>

ApexChartを用いたデータの可視化（提供：CoderPad）

Chart.js

　「Chart.js」はJavaScriptのデータ可視化ライブラリで最も使われているものの一つだ。GitHubでは、これらのライブラリとしては「D3.js」に次いでスター数が多い。

Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る