web-dev-qa-db-ja.com

jQueryを使用した円グラフ

JavaScriptで円グラフを作成したい。検索すると、Google Charts APIが見つかりました。 jQueryを使用しているため、 Google ChartsのjQuery統合 が利用可能であることがわかりました。

しかし、私の問題は、グラフを作成するために実際のデータがGoogleサーバーに送信されることです。データがGoogleに送信されないようにする方法はありますか？データを第三者に送信するのが心配です。

javascriptjqueryjquery-pluginsgoogle-visualization
92
Arun P Johny

jqPlot は見栄えが良く、オープンソースです。

最も印象的で最新の jqPlotの例 へのリンクを次に示します。

47
Thomas Bratt

ロット

制限：線、点、塗りつぶされた領域、バー、パイ、およびこれらの組み合わせ

相互作用の観点から見ると、FlotはjQueryを使用した場合と同様に、Flashグラフ作成に可能な限り近づきます。グラフの出力は非常に滑らかで見栄えが良い一方で、データポイントを操作することもできます。つまり、データポイントにカーソルを合わせて、グラフ内のそのポイントの値について視覚的なフィードバックを得ることができます。

トランクバージョンのflotは円グラフをサポートしています。

ズーム機能をプロットします。

さらに、グラフのチャンクを選択して、特定の「ゾーン」のデータを取得することもできます。この「ゾーニング」の二次機能として、グラフ上の領域を選択してズームインし、データポイントをもう少し詳しく見ることもできます。 非常にクール。

スパークライン

制限：パイ、ライン、バー、組み合わせ

Sparklinesは、私のお気に入りのミニグラフ作成ツールです。ダッシュボードスタイルのグラフに最適です（次回ログインするときにGoogle Analyticsダッシュボードを考えてください）。それらは非常に小さいため、行に含めることができます（上記の例のように）。すべてのグラフプラグインで使用できるもう1つの素晴らしいアイデアは、セルフリフレッシュ機能です。 Mouse-Speedデモでは、ライブチャートのパワーを最大限に発揮します。

クエリチャート0.21

制限：エリア、ライン、バー、およびこれらの組み合わせ

jQuery Chart 0.21は、見栄えの良いチャートプラグインではありません。処理できるグラフに関しては機能的にはかなり基本的ですが、時間と労力をかけることができれば柔軟性があります。

チャートに値を追加するのは比較的簡単です：

.chartAdd({

    "label"  : "Leads",
    "type"   : "Line",
    "color"  : "#008800",
    "values" : ["100","124","222","44","123","23","99"]
});

jQchart

制限：バー、ライン

jQchartは奇妙なものです。アニメーショントランジションとドラッグアンドドロップ機能が組み込まれていますが、少し不格好で、一見無意味です。 CSSの設定が正しい場合、見栄えの良いチャートが生成されますが、もっと良いものがあります。

TufteGraph

制限：バーと積み上げバー

Tuftegraphは、「お母さんに見せたいきれいな棒グラフ」として販売しています。 Flotはよりきれいですが、Tufteは非常に軽量であるために役立ちます。それには制限がありますが、選択できるオプションはほとんどないので、与えられたものを手に入れることができます。クイックウィン棒グラフを確認してください。

97
Sorantis

ここにたくさんの素晴らしい提案があります-ちょうど良い測定のためにスタックに ZingChart を投げるだけです。最近、ライブラリの jQuery wrapper をリリースしました。これにより、チャートの作成とカスタマイズがさらに簡単になりました。 CDNリンクは以下のデモにあります。

私はZingChartチームに所属しており、私たちは皆さんの質問に答えるためにここにいます！

$('#pie-chart').zingchart({
  "data": {
    "type": "pie",
    "legend": {},
    "series": [{
      "values": [5]
    }, {
      "values": [10]
    }, {
      "values": [15]
    }]
  }
});
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>

<div id="pie-chart"></div>
5
RockinSocks

フィールドに新しいプレーヤーがあり、非常に滑らかなアニメーションとパフォーマンスのためにCanvasを使用している高度なナビゲーションチャートを提供します。

https://zoomcharts.com/

チャートの例：

interactive pie chart

ドキュメント： https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

このlibの素晴らしい点：

  • 他のスライスは拡張可能
  • Pieは階層構造のドリルダウンを提供します（例を参照）
  • 独自のデータソースコントローラーを簡単に記述するか、単純なJSONファイルを提供する
  • すぐに高解像度画像をエクスポート
  • フルtouchサポート。iPad、iPhone、Androidなどでスムーズに動作します。

enter image description here

チャートは、非営利使用、商用ライセンス、およびテクニカルサポートも利用可能なfreeです。

インタラクティブなタイムチャートとネットチャートも使用できます。 enter image description here

enter image description here

チャートには広範なAPIと設定が付属しているため、チャートのあらゆる側面を制御できます。

4
jancha

言及されていない他のいくつか：

ミニパイ、ライン、バーの場合、 Peity は素晴らしく、シンプルで、小さく、高速で、本当にエレガントなマークアップを使用します。

私はそれがFlotとの関係（その名前が与えられている）についてはわかりませんが、 Flotr2 はかなり良いです。

Bluff は見栄えの良い折れ線グラフを生成しますが、そのパイには少し問題がありました。

私が望んでいたものではありませんが、別の商用製品（Highchartsによく似ています）は TeeChart です。

4
Synchro

Chart.js は非常に便利で、他の多くの種類のグラフもサポートしています。

JQueryの有無にかかわらず使用できます。

3
Diamond Python