これらは2019年に最適なJavaScriptチャートライブラリです

まず、簡単な歴史:

データの収集と使用が指数関数的に増加し続けるにつれて、このデータを視覚化する必要性がますます重要になっています。開発者は、何百万ものデータベースレコードを、人間がすばやく直感的に解釈できる美しいチャートやダッシュボードに統合しようとしています。

データ視覚化技術は過去10年間にわたって改善を続けており、多くの高度なチャートライブラリが消費者に利用可能になっています。2000年代初頭、チャートの生成はサーバー側の画像ビットマップチャートによって支配されていました。FlashやSilverlightなどのプラグインは、よりインタラクティブなグラフ作成エクスペリエンスを提供しましたが、ダウンロード速度、バッテリー寿命、およびシステムリソースに大きな負担をかけました。

モバイルとタブレットの使用が急増したため、プラグインは主要なプラットフォームでサポートされなくなり、開発者はどこでも実行できるオープンなクライアントサイドテクノロジーに移行する必要がありました。同時に、非常に高解像度の画面の出現と、タッチジェスチャによるより一般的なズームにより、解像度に依存しないベクターチャートが最前線に登場しました。

JavaScriptとSVG(Scalable Vector Graphics)が支配的なデータ視覚化の現在の時代を入力してください。チャートは、特別なプラグインなしですべてのブラウザで実行されるようになり、インタラクティブ機能とアニメーションをサポートし、最高解像度のデバイスでも鮮明に表示されます。50を超える視覚化ライブラリを確認したところ、次の9つの製品が際立っていました。

D3.js

D3.jsは、非常に広範で強力なグラフィックJavaScriptライブラリです。これにより、任意のデータをドキュメントオブジェクトモデル(DOM)にバインドし、データ駆動型の変換をドキュメントに適用できます。

D3は、軸、色、階層、等高線、イージング、ポリゴンなど、他の多くの小さな技術モジュールを含む、一般的なグラフ作成ライブラリをはるかに超えています。これらすべてが急な学習曲線になります。

単純なグラフを作成しようとすると、複雑になる可能性があります。軸を含むすべての要素、およびその他のグラフ項目は、明示的に定義する必要があります。多くのサンプルは、CSSを使用してグラフ要素のスタイルを設定する方法を示しています。チャートベースの機能は自動的に適用されません。雑草の中に入り、創造性を使ってすべての要素を完全に制御したい場合は、それが最良の選択です。データ視覚化プロジェクトの要件を満たすために24時間体制で作業することは、最初から始めるのが最善の選択ではない場合があります。

D3.jsは、チャートライブラリの構成要素になります。開発者はD3を使用して、NVD3などのD3を使用するチャートソリューションを使いやすくしています。

D3.jsはオープンソースであり、無料で使用できます。

JSCharting

JSChartingチャートライブラリは、マップ、ガント、ストックなど、使用するために個別のライブラリを必要とすることが多いチャートタイプを多数サポートしています。これには、すべての世界の国々の組み込みマップと、SVGアイコンのライブラリが含まれています。スタンドアロンのマイクロチャートのスイートは、ページ上の任意のチャートラベルまたは任意のdiv要素でレンダリングできます。UIコントロール(UiItems)も含まれているため、よりリッチなインタラクティブチャートが可能になります。データまたは視覚化変数をリアルタイムで制御するのは簡単で、グラフはSVG、PNG、PDF、およびJPG形式にエクスポートできます。

ギャラリーは、チャートタイプと機能サンプルに分かれています。チャートのスタイリングは洗練されており、すっきりとしたチャートが得られます。全体的なビジュアルは、クリーンでプロフェッショナルなチャート作成体験を提供します。

含まれているサンプルは、構成オブジェクトを使用してグラフをカスタマイズします。管理図タイプを作成および制御するための設定は、非常に簡単に使用できます。より複雑なチャートタイプを指定するために必要なプロパティ設定はほとんどなく、JSChartingには強力で動的なデフォルトがあり、シナリオに最適な設定を自動的に選択しようとします。

ドキュメントには、多くのチュートリアルと完全なAPIプロパティの説明が含まれています。多くのプロパティには、使用例とサンプルリンクが含まれています。

JSChartingは、非営利および個人使用は無料で、すべてのチャートタイプと製品を含む商用ライセンスオプションを単一の料金で提供します。

ハイチャート

Highchartsは、世界最大の企業の多くで使用されている人気のJavaScriptチャートライブラリです。チャートは、IE6 / IE8までの下位互換性のために、SVGとVMLへのフォールバックを使用して生成されます。デモチャートは、かなり豊富な機能セットを示していますが、視覚的には驚かされません。一般的なドキュメントには、多くの関連トピックのチュートリアルが含まれており、APIドキュメントは完全です。

チャートは構成オプションを使用してチャートを作成し、APIは使いやすいです。

Highchartsは、非営利および個人的な使用は無料です。その他の使用には商用ライセンスが必要であり、株式、地図、ガントチャートは別々にライセンスされます。

amCharts

amChartsは最近、映画のようなシーンを作成できる強力なSVGアニメーションエンジンを追加したバージョン4をリリースしました。

デモチャートはとても素敵に見えます。ほとんどのデモには、チャート変数をリアルタイムで調整するための多数のパレットとスライダーUIが用意されています。ドキュメントには、多くのチュートリアルと完全なAPIプロパティの説明が含まれています。

グラフの作成は、構成ベースのアプローチとは少し異なり、代わりに、より宣言的なAPIを使用します。チャートを構成するには少し多くのコードが必要ですが、コードの完了エクスペリエンスが向上します。

amChartsは、ブランドチャート付きの無料ライセンスと、その他の用途向けの有料ライセンスを提供しています。

Googleチャート

Googleのグラフは強力で使いやすいです。

サンプルチャートは見た目がきれいで、見やすいです。ギャラリーと拡張ギャラリーには多くの種類のグラフが表示されますが、ハンバーガーメニューを押すと、これらのギャラリーリストに表示されていない種類(カレンダーなど)がさらに表示されます。

各チャートタイプには、実例を含む専用のチュートリアルがあります。チュートリアルには、関連する機能とAPIリストのコードが含まれています。これは、新しいチャートライブラリを使い始めるのに楽しい経験です。

チャートは、構成オプションオブジェクトを使用してカスタマイズされます。データセットは、すべてのグラフで使用できるDataTableクラスを使用して入力されます。各チャートタイプには、タイプ固有のチュートリアルにリストされている固有のオプションがあります。プロパティの命名は標準化されており、多くのオプションがすべてのタイプで機能します。

Googleチャートは無料ですが、注意点があります。これはWebサービスであり、ローカルでホストすることはできません。過去にGoogleはAPIを廃止したため、使用法がミッションクリティカルである場合は、別のオプションを選択することをお勧めします。

ZingChart

ZingChartは多くのチャートタイプを提供し、Angular、React、およびその他のフレームワークと統合します。多くのカスタマイズオプションを備えた強力な機能セットがあります。

デモチャートには、さまざまなスタイリングテーマが示されています。その中には、他のテーマよりも見栄えの良いものもありますが、必要に応じてスタイルを設定するオプションがあります。デモは、利用可能なすべてのチャートタイプを示しているわけではありません。

ドキュメントには、利用可能なすべてのタイプのチュートリアル、多数の機能、および完全なAPIリストが含まれています。

ZingChartは、構成オプションを使用してグラフをカスタマイズします。サンプルには、フォントのスタイル設定など、多くのプロパティ設定が含まれています。これらは、特定のチャートに必要な設定を理解する上で邪魔になる可能性があります。

ZingChartは、ブランディングとともに無料で使用できます。有料ライセンスは、ブランド以外の使用に利用できます。

FusionCharts

FusionChartsは、Flashベースのチャートプラグインとして始まって長年存在しています。これは、堅牢なチャート視覚化ライブラリです。XML、JSON、JavaScriptなどの多くのデータ形式をサポートし、最新のブラウザーで動作し、IE6との下位互換性があります。多くのJavaScriptフレームワークとサーバーサイドプログラミング言語もサポートされています。

チャートギャラリーには多数の例が含まれており、見た目はすっきりしています。

ドキュメントには、優れたAPIの説明と、各グラフタイプの例が含まれています。構成プロパティは、タスクとチャート機能によってグループ化されています。

チャートは構成ベースのオプションを使用して作成され、比較的使いやすいです。APIを深く掘り下げると、プロパティのリストが長くなる可能性があります。{chartLeftMargin、showAlternateHGridColor}など、すべての構成プロパティは浅いです。コードの完成度を向上させる試みのようです。

FusionChartsは、チャートのブランディングで個人的に無料で使用できます。有料ライセンスは、ブランドなしおよび商用利用が可能です。

クールチャート

KoolChartは、HTML5キャンバスベースのJavaScriptチャートライブラリです。マッピングおよびグリッド製品も利用できます。

彼らの新しいv5リリースには、よりインタラクティブな機能セットと更新されたスタイルが含まれています。ビジュアルはクリーンでモダンです。キャンバスを使用すると、ラスターベースであるという犠牲を払ってパフォーマンスが向上します。

サンプルでは、​​文字列ベースのXMLを使用してグラフオプションを適用していますが、これは他のアプローチよりも実用的ではないようです。これらのオプションはHTML5のように見えますが、JavaScript文字列を介して設定されます。

APIは、各プロパティのサンプルチャートで十分に文書化されています。173ページのPDFマニュアルも利用できます。

評価には2か月の試用期間があります。試用期間が終了すると、ライセンスが必要になります。

Chart.js

Chart.jsは、8種類のグラフをサポートするオープンソースのJavaScriptライブラリです。わずか60kbの小さなjsライブラリです。タイプには、折れ線グラフ、棒グラフ、面グラフ、レーダー、円グラフ、バブル、散布図、および混合が含まれます。時系列もサポートされています。レンダリングにcanvas要素を使用し、ウィンドウのサイズ変更に応答してスケールの粒度を維持します。IE9との下位互換性があります。ポリフィルはIE7でも使用できます。

サンプルのビジュアルはかなりモダンに見え、初めて描画するときの初期アニメーションが含まれています。シリーズまたはデータポイントをリアルタイムで追加するときにスムーズにアニメーション化します。チャートオプションは、update()関数を呼び出してチャートを再描画した後に変更できます。

サンプルソースコードはウェブサイトギャラリーには表示されていませんが、GitHubリポジトリで入手できます。構成オプションは、チャートの作成と変更に使用されます。オプションAPIはクリーンで直感的です。

ドキュメントは徹底しており、プロパティAPIとコードスニペットを使用したチュートリアルが含まれています。

Chart.jsはオープンソースライブラリであり、個人的および商用目的で無料で使用できます。これはプラスです。タイプの数が限られていることは、より高度なダッシュボード要件の問題になる可能性があります。

結論

JavaScriptチャートライブラリのエコシステムは、過去10年間で大幅に進化してきました。今日、非常に多様な要件を満たす多数のチャート製品があり、数百のチャートタイプから幅広いプロジェクトに対応しています。ほとんどのライブラリは無料の試用版またはブランドバージョンを提供しており、独自のデータ、読み込み、プロジェクトの複雑さを使用してグラフの有効性を評価できます。

ほとんどのチャートライブラリは、単純なキュレートされたデータセットと静的な視覚化を簡単に処理できます。ただし、実際の動的データを視覚化すると、グラフが常にスムーズに処理できるとは限りません。グラフが正しく表示されるように要素を調整および配置するには、さらに作業が必要になる場合があります。この手動による調整は、新しい動的データが視覚化されるときに破損する可能性があります。

独自のニーズに最適なJSチャートソリューションを選択するには、上記のいくつかのライブラリに対して独自のデータをテストして、現在および将来のプロジェクトに最適であることを確認することをお勧めします。