データは私たちの周りにあふれています。当社はこれを使用して、パフォーマンス、サービスの提供、効率を最適化します。ただし、生の数値が常に情報を伝える最良の方法であるとは限りません。提供されたデータは、テキスト形式ではなく視覚的な形式で提示すると、ユーザーはそのデータを保持する可能性が高くなります。このため、図は情報共有に欠かせないツールとなっています。
JavaScript は、Web サイト上でグラフを作成するために使用できる無料のライブラリを多数提供しています。この記事では、最適な無料の JavaScript チャート ライブラリのリストを作成し、情報に基づいた選択を支援するためにそれらの機能の概要を説明します。
Web サイト上でグラフを描画することを考えたとき、最初に思い浮かぶライブラリの 1 つは Chart.js です。このライブラリを使用する最大の利点の 2 つは、学習が非常に簡単で Web サイトに統合できることと、8 種類の一般的なグラフ (折れ線グラフ、棒グラフ、レーダー チャート、バブル チャート、散布図) を作成できることです。面グラフ、円グラフ、極座標グラフ。同じチャート上に 3 つ以上のチャート タイプを表示することもできます。
Roseclad によるアニメーションデモ。
ライブラリは HTML5 キャンバス要素を使用してすべてのグラフを表示し、これらのグラフはデフォルトで応答します。これは、画面サイズの変化に適応することを意味します。ライブラリが提供するすぐに使えるメソッドを使用して、チャートのさまざまな側面をアニメーション化することもできます。
Chartist.js ライブラリは、JavaScript を使用して独自のグラフを作成したい人にとってもう 1 つの使いやすいソリューションです。 Chart.js と Chartist.js にはいくつかの類似点がありますが、いくつかの基本的な違いもあります。
イアン・ホイットフィールドによるチャーティストのデモ。
このライブラリは、Chart.js と同様に軽量で応答性が高いです。また、習得が簡単で、折れ線グラフ、棒グラフ、円グラフなどの基本的なグラフの種類をすべてサポートしています。このライブラリには、チャートが機能するためにロードする必要がある外部依存関係はありません。
Chart.js と Chartist.js の大きな違いの 1 つは、後者はグラフのレンダリングに SVG を使用することです。すべてのチャートは多くのサブタイプに分割されています。たとえば、単純な折れ線グラフだけでなく、基礎領域が塗りつぶされた折れ線グラフや双極折れ線グラフも作成できます。
Chartist.js は、グラフをレンダリングするための機能を提供することに重点を置いています。これは、イベント処理やラベルの表示などの組み込み機能が利用できないことを意味します。ただし、これらを自分で追加するのは比較的簡単です。
D3.js ライブラリは、data-driven document の略称で、データビジュアライゼーションの分野における重量級ライブラリの 1 つです。このライブラリを使用すると、任意の方法でデータを視覚的に表現できます。これには、標準のグラフ タイプも含まれます。
Jahid Hssan の D3 デモ。
このライブラリの最大の利点は、グラフを作成するときに得られるパワーと柔軟性です。このライブラリを使用すると、データを表すために想像できるほぼすべてのものを作成できます。一般的なグラフの種類に限定されません。このライブラリは、SVG、Canvas、HTML などのテクノロジーを組み合わせて使用して、あらゆる視覚要素を作成します。
レンダリングにおけるこれほどの柔軟性は、このライブラリが提供するすべての機能を使用するには急な学習曲線が必要になることを意味します。作業を完了するのに役立つ約 30 のモジュールと 1,000 以上のメソッドがあります。
D3.js を使用して Web サイト上にグラフを作成することに興奮している人もいるかもしれませんが、学習曲線が急であるため、やる気を失ってしまうかもしれません。この問題には解決策があると言ったらどうしますか?
C3.js ライブラリは中間点を提供します。作成するチャートは引き続き内部で D3.js を使用しますが、コードの作成に多くの時間を費やしたり、D3 の詳細を学習したりする必要はありません。 jsライブラリ。これは、D3.js に基づいてグラフを作成することに主に興味がある人にとっては優れたソリューションです。
Temperli の C3 デモをクリアします。
このライブラリを便利にする 3 つの機能は、使いやすさ、カスタマイズ オプション、レンダリングされるグラフの制御です。このライブラリは基本的に D3.js のラッパーであるため、グラフの作成に必要なすべての重労働を実行します。
ライブラリには、レンダリングする各要素のカスタム クラスも用意されているため、独自のスタイルを簡単に提供できます。最後に、チャートがレンダリングされた後でも、チャートの動作を制御するために使用できるコールバックが多数あります。
Frappe Charts は、スタイリッシュで応答性の高いグラフを簡単に作成できる素晴らしいオープンソース ライブラリです。グラフをレンダリングするために追加の依存関係をロードする必要はありません。
Kamal Dev によるプレゼンテーション
ライブラリには、棒グラフ、折れ線グラフ、面グラフ、円グラフ、ドーナツ グラフなど、多くの組み込みグラフ タイプが付属しています。円グラフに似た、さまざまな項目のシェアを示すパーセントベースのグラフを作成することもできますが、円ではなく棒で表示されます。 GitHub が表示するリポジトリ貢献度グラフと同様のヒートマップ グラフを作成することもできます。
このライブラリの気に入っていただける点の 1 つは、提供されるカスタマイズの範囲です。ライブラリに付属するツールチップは優れています。さまざまな線や領域をマークして、図に注釈を付けることもできます。利用可能な構成オプションは数多くあり、レンダリング後にデータ ポイントを変更することもできます。
Plotly.js も、拡張された機能リストを備えた無料のオープンソース JavaScript ライブラリです。このライブラリには、これらの言語でグラフを描画する場合に備えて、Python および R モジュールも含まれています。
plotly のデモ。
Plotly は D3.js と stackgl に基づいて構築されています。ただし、D3 とは異なり、Plotly の開発者は、一般的なグラフ タイプをより簡単に使用し、かなり迅速に描画できるようにすることに特に重点を置きました。これは、さまざまな種類のチャートを探している人に最適です。 Plotly は、基本的な折れ線グラフ、棒グラフ、散布図から、ヒストグラムや 2D 密度プロットなどの統計グラフまで、あらゆる種類のグラフを作成するのに役立ちます。
このライブラリにはイベント処理機能が組み込まれており、クリック、ホバー、選択イベントなどを処理できます。また、他の多くの構成オプションや、ズームインとズームアウト、パン、リセットなどの便利な機能も提供します。 Plotly.js を使用すると、グラフを編集可能にしたり、独自のロケールを使用してラベルにテキストを表示したりできます。
ApexCharts は、それ自体を、シンプルな API を使用してインタラクティブなグラフを構築するための最新の JavaScript グラフ作成ライブラリであると説明しています。このライブラリを使用してグラフを作成するのは、実際には簡単なプロセスです。グラフの種類、ラベル、キーと値のペアを含むオブジェクトとしてプロットするデータセットなど、必要なデータをすべて渡すだけで、ライブラリがすべてのレンダリングを処理します。
Reuben Prol によるデモンストレーション。
このライブラリのその他の注目すべき機能には、さまざまなチャートを作成して同期する機能が含まれます。一方のグラフに加えた変更は、もう一方のグラフにも反映されます。チャートを操作するためのオプションが多数あります。データをズームインおよびズームアウトしたり、パンしたり、上下にスクロールしたりできます。
利用可能なチャートの種類には、折れ線チャート、棒チャート、円チャート、ドーナツ チャート、レーダー チャート、ローソク足チャートなどが含まれます。また、棒グラフ、折れ線グラフ、面グラフを重ねて表示するなど、さまざまな種類のグラフを組み合わせて表示することもできます。独自の注釈を追加し、グラフ データを動的に更新することもできます。
uPlot JavaScript チャート ライブラリは、パフォーマンスに悪影響を与えることなく大量のデータ ポイントを表示したい人にとって、小型で高速なソリューションであると主張しています。また、GitHub ページでは、いくつかの人気のあるチャート ライブラリとの速度比較も提供しています。
驚くべきパフォーマンス メトリックの 1 つは、ライブラリが 135 ミリ秒で約 150,000 のデータ ポイントをプロットできることです。その他の機能には、非常に高速で応答性の高いズーム機能やホバー機能などがあります。次の CodePen デモでは、100,000 個のデータ ポイントを含むグラフを作成します。
スティーブン・ウィックランドによるプレゼンテーション。
このライブラリの便利な機能には、複数の Y 軸、スケール、グリッドに加えて、さまざまなタイプのスケール (線形や対数など) が含まれます。このライブラリを使用して、折れ線グラフ、棒グラフ、面グラフなどのタイプを作成できます。ストローク、塗りつぶし、ダッシュなどのプロパティを使用してグラフの外観をカスタマイズすることもできます。
ただし、このライブラリの使用を妨げる可能性のあることがいくつかあります。パフォーマンスの大幅な向上には代償が伴います。このライブラリには、組み込みのトランジションやアニメーションは提供されません。また、スクロールやズームの動作を処理するための動作も組み込まれていません。ただし、この機能を提供できるプラグインが存在します。
＃＃＃最終的な考え＃＃＃ライブラリがそのページに掲載している他のデモをいくつかチェックして、どれが気に入った機能を提供しているかを確認してください。
以上がトップの無料 JavaScript グラフ作成ライブラリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
