ホームページ » ツールキット » インタラクティブチャートを作成する9のJavascriptライブラリ

    インタラクティブチャートを作成する9のJavascriptライブラリ

    ですから、たくさんの変数を持った大量のデータを持っているので、どういうわけか他の人に中継しなければなりません。生の未整理のデータは、理解するのが難しいでしょう。これがチャートの助けが必要な理由です。 Webデザインで, グラフはデータの視覚化に最適なツールの1つです。. 読みやすく、目に優しく、比較的セットアップが簡単です。.

    しかし、ノッチを取り上げましょう。 これらのチャートにアニメーションとインタラクティブ機能を追加する, 読者がチャートから何か新しいことを学ぶことができるだけでなく、それと共に遊ぶことができるように。そこにあるたくさんのJSライブラリーのおかげで、実際には思ったより簡単です。チェックしてみましょう.

    チャートJS

    Chart.js 折れ線グラフ、棒グラフ、レーダーチャート、極地域チャート、円グラフ、ドーナツチャートの6種類のチャートを作成するための依存関係のないライブラリです。ライブラリもチャートの種類に応じて分割されているので、不要なものがページに表示されることはありません。レスポンシブデザインをサポートし、色やアニメーションなどの変数を簡単に変更してチャートインターフェイスをカスタマイズできます。.

    2.チャーティストJS

    チャーティストJS SVGを利用するレスポンシブチャートを作成するための素晴らしいライブラリです。その応答性に加えて、Chartistは懸念の明確な分離を使用することによってあなたに柔軟性を与えます:CSSによるスタイルとJSによるコントロール。カスタマイズを容易にするために、SASSファイルが含まれています。ここで素晴らしいことは、ChartistアニメーションAPIのSMILを使用してチャートをアニメーション化するための無限のオプションがあり、それによって追加のアニメーションオプションが得られることです。.

    3. C3 JS

    C3 JS D3 JSに基づいてグラフを作成するためのライブラリです。 D3 JSを使ってチャートを作成するのに必要なコードをまとめているので、D3コードの作成をスキップしてデータを入力するだけで済みます。 C3には、チャートを簡単に制御するために使用できるさまざまなAPIが付属しています。チャートをカスタマイズするには、特定のCSSクラスに独自のカスタムスタイルを定義します。単純な折れ線チャートからゲージチャートまでチャートを作成します。このページをチェックして、図書館のしくみを確認してください。.

    4.浮遊する

    浮遊する シリーズのオン/オフ、データポイントのインタラクション、パン、ズームなどのインタラクティブな要素を持つチャートを作成するためのjQuery plguinです。 Flotにはさまざまなチャートタイプのオプションがあります。チャートにもっと機能を追加したい場合は、ここで使用できるプラグインもいくつかあります。チャートは、HTMLキャンバスをサポートするブラウザでうまく機能します。.

    5. EChart

    チャート 複数のチャートタイプをサポートし、ビッグデータを処理し(デカルトチャートに最大200,000データポイントをプロット)、スケールローミング、複数のチャート間でデータを簡単に抽出、統合、および交換する機能を備えています。あるデータ型から別のデータ型に簡単に切り替えるためのもの、そしてもっとたくさんのもの.

    6.平和

    平和 あなたのWebページにミニチャートを追加します。要素をミニに変換する小さなjQueryプラグインです。 SVG 折れ線グラフ、棒グラフ、ドーナツグラフ、または円グラフ。あなただけの要素を作成し、のような値を与える必要があります 1/5 そして電話をかける 平和( 'パイ') その要素上でミニ円グラフを作成します。たとえば、5分の1しか強調されていないドーナツグラフを作成するには、次のHTMLを使用します。

    1/5

    チャートの色、半径、幅、高さはカスタマイズできますが、デフォルトでは小さいサイズで表示されます.

    7. DC JS

    DC JS 使用エンジンの点でC3 JSと類似点があります。どちらもSVGでチャートをレンダリングするためにD3ライブラリを使用しています。 DC JSは、ブラウザおよびモバイルデバイスのデータと分析を視覚化するのに役立つように作成されています。 D3 JSを利用しているため、チャートにユーザーの操作を追加できます。 DC JSは、単純なものから複雑なものまでチャートを作成するための強力なライブラリです。.

    8.グーグルチャート

    Google Chartを介したGoogle Visualization APIを使用して、インタラクティブなチャートやデータツールを作成できます。 Google Chartのデータ視覚化機能をチェックするためのチャートギャラリーがあります。はじめに、簡単なJavaScriptをWebページに埋め込んで、必要なGoogle Chartライブラリをロードします。次に、グラフ化したいデータをリストして、グラフオプションを使用してカスタマイズします。最後にidを使ってチャートオブジェクトを作成し、あなたのWebページ上で

    あなたのチャートを表示するためにそのIDを使って.

    9. NVD3

    NVD3 D3 JSで構築された再利用可能なチャートとチャートコンポーネントのセットです。したがって、このライブラリは、チャートを簡単に作成できるようにするための「テンプレート」です。 NVD3で作られたたくさんのサンプルチャートをここでチェックしてください。.

    今読んでください:インタラクティブ&カスタマイズされた地図を作成するためのJavaScriptライブラリ