JavaScript チャート ライブラリ: 13 の一般的な選択肢

#1 – Chart.js

Chart.js は、HTML5 の<canvas>を使用してチャートをレンダリングする実用的なチャート ライブラリです。

このライブラリは、デフォルトでレスポンシブであり、ユーザーの行動に基づいてアニメーション効果を適用できるなどの理由から、単純なプロジェクトでは簡単に一番の選択肢です。

Chart.js で作成できる 8 種類のグラフを次に示します。

• 面グラフ
• 棒グラフ
• バブル チャート
• ドーナツと円グラフ
• 折れ線グラフ
• 混合グラフ タイプ
• 極エリア チャート
• レーダーチャート

使いやすさに関して言えば、構文は単純で、JavaScript を使用したことがない場合でも、新しいチャートを簡単に作成できます。

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

動的関数とデータ プーリングでチャートを拡張したい場合、ライブラリには、新しい機能を追加するために使用できるプラグイン システムがあります。

Chart.js の例

CodePen の Sven (@hofmannsven) による Pen Proof of concept: Chart.js with Background Gradient を参照してください。

Chart.js のその他のリソース

• Chart.js + Next.js = 美しいデータドリブンのダッシュボード
• Chart.js 入門; タスクベースの学習

#2 – D3.js

まず、 D3 は従来のグラフ作成ライブラリではなく、データ視覚化ツールであると言うことから始めましょう。

D3 では、データ セットを指定して DOM にバインドできます。その後、ライブラリ関数を使用して、そのデータを独自の視覚的表現に変換できます。 視覚的な表現に関しては、D3 は HTML テーブル、SVG、および<canvas>を利用してページ上にデータをレンダリングします。

複数の対話型データ ポイントが配置された地理ベースの回転する地球儀を見たことがある場合は、そのプレゼンテーションが D3 で作成されている可能性があります。 ただし、以下のデモで確認できる基本チャートなど、実用的な用途にも適しています。 最終的には、D3 の公式のチュートリアル セクションを参照して、より複雑な機能を調べることをお勧めします。

D3.js の例

CodePen の Web Dev (@ronaldmarin) による Pen D3 Chart + ReactJS を参照してください。

D3.js 追加リソース

• D3.js チュートリアル
• D3.js カレンダー ヒートマップの作成

#3 – Apache ECharts

Apache ECharts が非常に人気がある理由の 1 つは、箱から出してすぐに作成済みの何百ものグラフの例にアクセスできることです。 Examplesディレクトリにアクセスして、これを自分で確認できます。 このページでは、線、棒、円グラフ、散布図、ヒートマップ、グラフなどのカテゴリのチャートと例を取り上げます。

また、すべての例には JavaScript と TypeScript のコード例が含まれています。 しかし、それだけではありません。このライブラリを使用することには、いくつかの実際の利点があります。 それらのいくつかを次に示します。

• データストリーミング。 何百万ものデータ ポイントを含むインタラクティブなグラフを作成したいですか? ECharts は WebSockets を使用してデータをストリーミングし、非常に大きなデータ セットでも非同期にロードできるようにします。
• モバイルフレンドリー。 ユーザーがモバイル デバイスで EChart を表示すると、グラフ自体が最適化されて、ズーム、パン、SVG レンダリングなどのインタラクティブな機能が提供され、最高の配信率が保証されます。
• 動的データ。 ECharts に複数の (個別の) データ ポイントをフィードすることができ、ライブラリはチャートを自動的にアニメーション化して、ユーザーにインタラクティブなエクスペリエンスを提供します。
• アクセシビリティ。 Apache ECharts (v4.0 以降) は、WAI-ARIA ガイドラインに従うように構築されています。

外部 CDN を使用して Web サイトにグラフを表示することもできます。

Apache EChart の例

CodePen の Vale (@vsigno) による Pen Apache Echart Example を参照してください。

Apache ECharts 追加リソース

• より優れた GitHub インサイト ツールを 1 週間で構築する

＃4 –プロット

Plotly は、データ アプリケーション展開用のローコード ソリューションである Dash の親会社です。 また、独自のグラフ作成ライブラリであるPlotlyを社内で開発しています。

Plotly を使用すると、最も基本的なグラフの視覚化を作成できますが、ライブラリの真の力は、統計ベースのグラフ、3D データ表現、および財務データに基づくグラフを作成する機能にあります。

Node.js モジュールとしても利用できますが、CDN から直接使用することもできます。

プロットの例

CodePen の plotly (@plotly) による Pen Add アノテーション オン クリック イベントを参照してください。

#5 – フラッペ

Frappe チャート ライブラリは、Frappe Framework を作成した人々によって作成されています。 このライブラリは非常にシンプルです。 そのシンプルさが、ライブラリの人気の主な要因です。

このライブラリは外部依存関係を必要とせず、わずか数行のコードでモバイル フレンドリーな SVG チャートをレンダリングできます。 基本的な軸グラフのコード例を次に示します。

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

この小さなスニペットは、次のようなグラフに変換されます。

混合グラフ (1 つの複数のグラフ)、注釈、ヒートマップのサポートもあり、データをリアルタイムで更新またはエクスポートする場合は API を使用できます。

フラッペの例

CodePen の Jang Rush (@weakish) による Pen Frappe Hello World を参照してください。

#6 – ApexCharts

ApexCharts は、まさに伝統的なグラフ作成ライブラリです。 ApexCharts と Frappe の主な違い (たとえば) は、ApexCharts が提供するデモがわずかに多いことです。 また、React、Vue、Angular などの一般的なフレームワークのネイティブ サポートも提供します。 これは、すべてのデモ チャートに、前述のフレームワークの構文で記述されたそれぞれのサンプルがあることも意味します。

機能に関しては、すべてのグラフは SVG 形式で生成され、デフォルトでモバイル対応になっています。 また、スムーズなアニメーションや注釈などの機能を利用したり、10 種類のサンプル スタイルから 1 つを選んでチャート テーマ パレットをカスタマイズしたりすることもできます。

ApexCharts の例

CodePen の ApexCharts (@apexcharts) による Pen Realtime Dashboard を参照してください。

#7 – G2

私は最近、React.js と Vue のコンポーネント ライブラリに関する私の記事を含め、いくつかの機会に Ant Design について話しました。 Ant は GitHub で非常に人気があるだけでなく、世界中のすべての地域でコミュニティに愛されています。

また、G2 グラフ ライブラリ (または「視覚化文法」と呼ばれる) は、Ant Design System を使用した Ant Design のグラフ作成システムの実装です。 AntV のホームページをチェックすることを強くお勧めします。ここには、リアルタイムのデータ視覚化に関連する他のライブラリがたくさんあります。

管理ダッシュボードなどの構築、データ パスの作成、レンダリング エンジンを使用したインタラクティブなデータ視覚化の例の作成に最もよく使用されます。 このエンジンは、WebGL、Canvas、および SVG を介してチャートとデータ ベクトルをレンダリングできます。 また、ライブラリはプラグ可能であるため、D3.js (前述) などのより堅牢なライブラリを使用して、グラフのプレゼンテーションをさらに強化できます。

#8 – ラフビズ

Jared Wilber の RoughViz ライブラリは、3 つの異なるライブラリ (D3.js、Rough.js、および hand-drawing スケッチ プロセッサ) を組み合わせたものです。 上のスクリーンショットの例からわかるように、これは典型的なチャート ライブラリではありません。 roughViz は、JavaScript を使用して手書きのスケッチ スタイルのチャートを作成するのを支援する目的で完全に構築されています。

このタイプのライブラリは、個人的なプロジェクト、つまり、従来のプロ スタイルのアプローチよりも創造的な火花を必要とするプロジェクトに最適です。 また、構文自体は可能な限りシンプルで、Frappe や ApexCharts などと非常によく似ています。

以下のデモでそれを確認できます。

ラフ Viz の例

CodePen の Danny Englishby (@DanEnglishby) による Pen RoughViz デモを参照してください。

#9 - 軽量チャート

金融関連のプロジェクト (または仮想通貨) に取り組んでいる場合、前述のチャート ライブラリの多くが役に立たないことは明らかです。 そのため、金融ベースのチャートとグラフを表示するために特別に構築されたチャート作成ライブラリである Lightweight Charts を次に示します。

このライブラリはオープンソースで軽量であるだけでなく、財務とその動的構造に関するチャート データを表示するために必要なすべての機能を備えています。

これらの機能の 1 つがデータ ストリーミングです。これにより、リアルタイム データをキャンバスに渡し、ユーザーがページを更新することなくデータを更新できます。 このライブラリのホームページで説明されているように、パフォーマンスは問題にならないはずです。

「当社のグラフ作成ソリューションは、最初から巨大なデータ配列を処理するように設計されています。 新しいティックで毎秒複数回更新されても、チャートは何千ものバーがあっても応答性と機敏性を維持します。」

以下のデモをチェックして感触をつかんでください。チャートのオプションと機能の多くもご覧ください。

軽量チャートの例

CodePen の truong (@truong160196) による Pen TradingView の高度なチャートを参照してください。

軽量チャート 追加リソース

• アプリケーションの財務チャート

#10 – ビルボード

Billboard は、D3 に基づくインターフェイス チャート ライブラリです。 SVG レンダリング、モバイル デバイスのタッチ サポート、シンプルなインターフェイス、優れた API ドキュメントなど、期待されるすべての最新機能を備えています。

しかし、私のお気に入りの機能は、おそらく他の多くの人にとっても、Billboard がこのライブラリで作成できるチャートの例を 230 以上提供していることです。 これらの例は、基本、軸、データ、グリッド、相互作用、地域などのチャート カテゴリに分類されています。

これは、プロジェクトとその要件に適したチャート タイプを見つけるだけでなく、他のオプションを調べて、特定の例が注目を集めるかどうかを確認できることを意味します。

Billboard.js の例

CodePen の DTCC (@dtcc) による Pen Chart Requests – Billboard.js を参照してください。

#11 – 視点

Perspective は FINOS (Open-Source Fintech) が運営するプロジェクトの 1 つであり、FINOS 自体も Linux Foundation の一部です。 軽量チャートと同様に、Perspective.js は金融ベースのプロジェクトにチャート ソリューションを提供することに重点を置いています。 ただし、それ以上のことが可能であり、e コマース、データ グリッド、および出荷セグメンテーションに関連するプロジェクトで頻繁に使用されています。

Covid-19、空港、およびオリンピックなどの主要なスポーツ イベントに関するグラフを見たことがある場合は、インターフェイスとデータ ストリームの統合が Perspective で行われた可能性が高いです。 データ ストリームと複雑なリアルタイム分析用に最適化された、豊富なユーザー インターフェイスを備えています。

JavaScript および Python 開発者が利用でき、Custom Elements Web Component を使用します。

#12 – トースト UI チャート

どちらかといえば、Toast UI グラフ作成ライブラリは、グラフのスタイルとそのデザインに関する限り、考慮すべきもう 1 つの選択肢です。 ここでの機能は、これまで見てきたライブラリと非常によく似ています。

Toast UI が他の選択肢と異なる点は API 仕様だと思います。 これはおそらく、手に入れることができるより優れた API の 1 つであり、無料の詳細なドキュメントが付属しています。 API 機能の 1 つにInstancesがあります。これは、データ ソースが変更された場合、またはユーザー入力が原因でチャート データを動的に変更する方法です。

Toast がサポートするグラフの種類には、棒、縦棒、線、面、バブル、ツリーマップ、レーダー、放射状の棒などがあります。 このライブラリを使用するための推奨される方法は npm を使用することですが、CDN が利用可能であり、チャートを表示する場所にdiv id="chart"コンテナーを指定するだけで済みます。

#13 – リチャート

主に React.js を使用している場合、Recharts ライブラリは React を使用して D3.js の上に構築されています。 ネイティブの React.js コンポーネント アーキテクチャを尊重し、Recharts で作成されたチャートを分離して、必要なページの個々のコンポーネントとして再利用できます。

すべてのチャートの例には、既存のプロジェクトで試してみたい場合に備えて、コンポーネント構造が事前に作成されています。 このライブラリは 2016 年に最初にリリースされましたが、現在も活発に開発されています。

リチャートの例

CodePen の binu (@binutomy) による Pen ReCharts を参照してください。