JSのチャートライブラリ

今日では、あなたとJSの下ナレッジグラフライブラリを共有します。

ギャラリーチャート1

データの収集および使用は指数関数的に増加し続けてと、このデータの需要の可視化はますます重要になってきています。開発者は、人間が迅速かつ直感的に説明できるように、美しいグラフやダッシュボード用のデータベースレコードの数百万人を統合しようとしています。

データ可視化技術は絶えず、過去10年間に消費者に利用可能になりまし高度なグラフ作成ライブラリの多くが改善されました。2000年代初頭では、グラフの生成は、主にサーバ側画像マップで構成される。このようなFlashとSilverlightプラグインで、よりインタラクティブな体験チャートを提供等が挙げられるが、ダウンロード速度、バッテリー寿命とシステムリソースとして大きな打撃を受けました。

モバイルおよびタブレットの使用の普及によって、メインプラットフォームは、もはやプラグインをサポートされ、開発者は、どこでも実行できるオープンなクライアント技術を有効にありませんでした。同時に、超高解像度の画面や、より一般的なタッチジェスチャーの出現は、最前線にスケーリングされた解像度に依存しないベクタテーブルをプッシュするように見えます。

JavaScriptとSVG(スケーラブルベクターグラフィックス)に基づくデータの可視化、現在の時代を入力します。グラフは現在、特別なプラグインのインタラクティビティやアニメーションのサポートを必要とせずに、あなたは明確にしても、デバイスの最高解像度でそれを表示することができ、すべてのブラウザ上で実行することができます。50以上の可視化ライブラリを想起し、9つの製品が目立ちます。

D3.jsここに画像を挿入説明
d3.js非常に強力なJavaScriptのグラフィックスライブラリです。それはあなたがドキュメントオブジェクトモデル(DOM)、ドキュメントに、データ駆動型の変換に任意のデータをバインドすることができます。

そのようなシャフト、色、階層、輪郭、ジョグ、多角形等の他の小さい技術モジュールの数を含むはるかに一般的なライブラリシステムを超えD3、。このすべては、学習曲線が急峻であることができます。

簡単なチャートを作成しようとすると複雑になることがあります。我々は、すべての要素やシャフトなどのチャートを含む他の項目、の明確な定義が必要です。多くの例では、スタイル、チャート要素にCSSを使用する方法を示しています。チャートの機能に基づいていないが自動的に適用されます。あなたが雑草に取得し、すべての要素を完全に制御に創造性を使用したい場合は、それが最良の選択です。最良の選択ではないかもしれないゼロからのデータの可視化プロジェクトの要件を満たすためにクロックを回避。

これは、ブロックD3.jsグラフライブラリを構築するとして使用することができます。D3の開発者が使いやすい(例えばNVD3など)作図ソリューションを利用するためにそれを使用しています。

D3.jsは自由に使用するオープンソースです。

JSChartingここに画像を挿入説明
JSChartingチャートライブラリは、マップ、ガントチャート、株式や頻繁にのみ使用する必要がある他のライブラリを含むチャートタイプの大規模な数をサポートしています。これは、すべての組み込みの世界各国のマップと同様に、SVGのアイコンライブラリが含まれています。ミニチャートの別のセットは、任意のグラフのラベルまたはページ上の任意のdiv要素で提示することができます。また、UIコントロール(UiItems)を含む豊かなインタラクティブなチャートを提供することができます。リアルタイムの制御やデータの可視化変数は非常に簡単で、チャートはSVG、PNG、PDFやJPG形式としてエクスポートすることができます。

サンプルにギャラリーグラフの種類と機能。研磨チャートスタイルは、チャートのいくつかの簡単な外観を生成することができます。全体的な視覚効果がきれいで、プロの地図製作体験を提供しています。

カスタムグラフを含むサンプルの使用設定オブジェクト。作成や設定の管理図の種類は非常に使いやすいです。ただ、いくつかのプロパティを使用すると、グラフの種類のより複雑なセットを指定して、それが自動的にプログラムの最適な設定を選択しようとすることを意味し、強力かつダイナミックなJSChartingのデフォルトを、持っていることができます。

文書には、多くのチュートリアルと完全なAPIのプロパティの説明を含んでいます。プロパティの多くは、サンプルの使用を含み、および実施例は、リンクします。

無償の個人的かつ非商業的使用のためにJSCharting、また、すべてのグラフの種類や製品が、支払う必要が含む商用ライセンスオプションを提供しています。

Highchartsここに画像を挿入説明
Highchartsチャートは、世界最大の企業の多くで使用される人気のJavaScriptライブラリです。SVGを使ってグラフを生成し、VML、IE6 / IE8のの後方互換性のすべての機能にフォールバック。プレゼンテーションチャートは、豊富な機能セットを示したが、外観が印象的ではありません。チュートリアル、APIドキュメントと非常に詳細など、多くの従来のドキュメントに関連するトピック。

チャートを作成するための構成オプションを使用してグラフ、およびAPIを使用するのは簡単です。

Highchartsは、非商用、個人使用は無料です。他の用途は商用ライセンスを必要とし、在庫、地図やガントチャートがライセンスされています。

amChartsのここに画像を挿入説明
amChartsは最近、強力なSVGアニメーションエンジンを追加する彼らのバージョン4をリリースし、あなたは映画のようなシーンを作成することができます。

プレゼンテーションチャートは良いように見えます。ほとんどのデモでは、リアルタイムの調整変数をグラフ化するために大規模なパレットとスライダーUIを提供します。ドキュメントには、多くのチュートリアルと完全なAPIのプロパティの説明を含んでいます。

チャートおよびコンフィギュレーションベースのアプローチの感覚を作成することは多少異なりますが、APIの使用がより宣言。それは、チャートを設定するには、より多くのコードがかかりますが、経験を完了するために、より良いコードを提供します。

amChartsは、ブランドチャートで無料のライセンスを提供し、他の用途のために支払われたライセンスを提供しています。

チャートGoogleの
ここに画像を挿入説明
強力で使いやすいGoogleのチャート。

サンプルテーブルは非常にきれいに見える、と非常に簡単に参照してください。ギャラリーと拡張ギャラリーが表示チャートの種類の数が、はバーガーメニューが表示されより多くの種類(例えば暦)によると、これらのタイプは、ギャラリーの一覧には表示されません。

各チャートタイプは、専用のリアルタイムのチュートリアルと例があります。これらのチュートリアルは、コード関連の機能とAPIの在庫があります。これは、新しいチャートライブラリ楽しい経験の始まりです。

チャートオブジェクトをカスタマイズするための設定オプション。データテーブルクラスのデータセットを充填し、そのようなグラフは、すべてで使用することができます。各チャートタイプは、チュートリアルのタイプに固有のオプションのユニークなリストを持っています。属性名が標準化され、多くのオプションは、すべてのタイプのために用意されています。

Googleのチャートは無料ですが、警告があります。これは、ローカルにホストすることができないWebサービスです。過去には、GoogleがAPIを排除した、あなたはミッションクリティカルな使用している場合ので、あなたは他のオプションを選択することもできます。

ZingChart
ここに画像を挿入説明
ZingChartは多くのチャートタイプを提供し、そして、角度反応し、他のフレームワークと統合します。これは、堅牢な機能セットと、多くのカスタマイズオプションがあります。

プレゼンテーションチャートは他よりも良く見えるそのうちのいくつかのスタイルテーマのシリーズを表示しますが、スタイルを選択することができます。プレゼンテーションは、利用可能なすべてのグラフの種類を示すものではありません。

ドキュメントはもちろん、すべての利用可能な種類、機能の数が多いとAPIの完全なリストが含まれています。
ZingChartは、チャートをカスタマイズするための設定オプションを使用します。例としては、属性の数は、フォントスタイルとして、提供されています。これらは、チャートは必要性を与えられたものの理解を妨げる可能性があります。

ブランドで自由に使用するZingChart。有料ライセンスは非ブランドの使用のために使用することができます。

FusionChartsのは
ここに画像を挿入説明
フラッシュベースのプラグインはすでに何年も前から存在するようFusionChartsのチャート。これは、堅牢なグラフの可視化ライブラリです。それは、現代のブラウザで動作することができ、XML、JSONやJavaScriptなどのデータ形式の様々なサポートし、IE6と下位互換性があります。多くのフレームワークはまた、JavaScriptとサーバーサイドのプログラミング言語をサポートしています。

チャートライブラリは、明確な外観を持っている例が多数含まれています。

文書APIが良好とチャートの各タイプの記述の例を含みます。タスク構成の特性および特徴によってパケットをグラフ。

チャートは、ベースの設定オプションが作成され、比較的使いやすいです。綿密な研究のAPI、プロパティリストは非常に長くなることができます。全ては、{chartLeftMargin、showAlternateHGridColor}として浅い構成プロパティです。これは、改善コード補完を試みることのようです。

FusionChartsのは、個人的な使用チャートのブランドのために自由です。有料ライセンスは非商用利用、ブランドのために使用することができます。

KOOLCHART
ここに画像を挿入説明
KoolChartは、HTML5のJavaScriptのチャートライブラリーに基づいています。また、マップおよびグリッド製品を提供しています。

彼らの新バージョンV5は、機能とスタイルの更新のよりインタラクティブなセットが含まれています。視覚効果は、清潔で近代的です。コストを犠牲にして、グリッドベースのパフォーマンスを使用してキャンバスは、より優れたパフォーマンスを提供します。

これらの例は、他の方法より実用的と思われるアプリケーションのチャートオプションにXMLの文字列を、使用しています。これらのオプションは、HTML5のような、しかし、JavaScriptの文字列の設定に目を通します。

APIドキュメントは、173のPDFマニュアルでも使用可能な各属性のサンプルチャートを、詳しく説明します。

評価のために2ヶ月の試用期間があります。試用期間の終了時に、あなたはライセンスが必要です。

Chart.jsのここに画像を挿入説明
chart.js 8種類のグラフをサポートするオープンソースのJavaScriptライブラリです。これは、わずか60キロバイトのJSライブラリです。種類は、折れ線グラフ、棒グラフ、面グラフ、レーダーチャート、円グラフ、バブル、散布図をミックスが含まれます。また、時系列をサポートしています。これは、レンダリングのためのcanvas要素を使用し、それに応答してリサイズされたズームウィンドウでの粒子サイズを維持します。これは、IE9と下位互換性があります。ポリフィルまた、IE7を使用すること。

視覚効果は、非常に近代的な例である初期の最初のアニメーションの描画が含まれています。それはスムーズにアニメーションやリアルタイムでのデータポイントの配列を付加します。あなたは後のグラフのオプションを変更すると、グラフの再描画更新()関数を呼び出すことができます。

サンプルソースコードは表示されませんが、中にGitHubのレポで図書館のウェブサイト上で見つけることができます。チャートを作成し、変更するための設定オプション。オプションのAPIは、クリーンで直感的です。

このドキュメントでは、プロパティのAPIとコードの断片についてのチュートリアルを含め、非常に包括的です。

Chart.jsはプラスポイントである、個人および商用目的のために自由であるオープンソースのライブラリです。より高度なダッシュボードの需要のために、種類の限られた数が問題になる可能性があります。

結論
過去10年間で、生態系のJavaScriptチャートライブラリーは、すでに大きな進歩を遂げています。今日では、グラフの種類の何百ものプロジェクトの広い範囲を提供する、非常に多様な要件を満たすために、チャートの製品の数が多いです。あなたは、チャートの有効性を評価するために、プロジェクトの独自のデータ、負荷および複雑さを使用することができますので、ほとんどのライブラリには、無料の試用版または商標を提供します。

ほとんどのグラフライブラリは、簡単にデータ・セットおよび静的な可視化の簡単な選択を処理することができます。しかし、視覚的なダイナミックな実世界のデータは、チャートは常にスムーズなプロセスではないかもしれないとき。あなたは調整して、チャートを右に見えるように要素を配置するより多くの作業を行う必要があり、新しいダイナミックなデータの可視化では、そのような手動調整が中断されることがあります。

ソリューションをダイアグラムあなたのJSの固有のニーズを満たすために最善を選択するために、私は最良のあなたの現在および将来のプロジェクトに適合することを確保するためには、上記の2つのテストのための独自のデータライブラリを示唆しています。

チャート上のJSライブラリは、あなたはどのくらいを学びますか?コメントは、コメント領域に歓迎されています!

公開された180元の記事 ウォン称賛13 ビュー7172

おすすめ

転載: blog.csdn.net/weixin_45794138/article/details/104862032