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

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

» 2022年08月29日 13時27分公開

[＠IT]

この記事は会員限定です。会員登録（無料）すると全てご覧いただけます。

　コーディング面接に使われる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」に次いでスター数が多い。

#CmsMembersControl .CmsMembersControlIn {width:100%;background:url(https://image.itmedia.co.jp/images/spacer.gif) #DDD;opacity:0.05;filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=5);z-index:1;}

続きを閲覧するには、ブラウザの JavaScript の設定を有効にする必要があります。

JavaScript関連プロジェクトのランキング「2020 JavaScript Rising Stars」が公開
「Best of JavaScript」プロジェクトは、2020年に最も注目を集めたJavaScriptプロジェクトなどのランキング「2020 JavaScript Rising Stars」を発表した。総合ランキングでは、過去5年間首位を維持した「Vue.js」を抜いて、「Deno」が首位を獲得した。
「State of JavaScript 2020」が公開、関連技術の動向が分かる
JavaScriptの利用動向に関する年次調査「State of JavaScript 2020」が発表された。世界137カ国のJavaScriptユーザー2万3765人の回答が集計、分析されている。JavaScript関連技術を7つに分け、それぞれの評価も分析した。「webpack」「Express」「React」「TypeScript」「Jest」といった技術に勢いがあることが分かったという。
「JavaScriptアプリ開発入門」電子書籍版
最近のWeb開発では、どのような技術を使い、どのようにアプリが開発されているのだろう。JavaScriptの言語仕様と人気のライブラリについての最新事情をキャッチアップして、これからの時代に備えよう。