jQueryを使用した円グラフ

https://stackoverflow.com/questions/1223537

11-07-2019
|

質問

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

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

解決

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

最も印象的で最新の jqPlotの例へのリンクです。

他のヒント

プロット

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

相互作用の観点から見ると、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は非常に軽量であるために役立ちます。それには制限がありますが、選択できるオプションはほとんどないので、与えられたものを手に入れることができます。クイックウィン棒グラフを確認してください。

ここにはたくさんの素晴らしい提案があります。 ZingChart を適切な方法でスタックに投げ込むだけです。最近、ライブラリの jQueryラッパーをリリースしました。チャートをカスタマイズします。 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>

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

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

Flotとの関係（名前がわかれば）はわかりませんが、 Flotr2 はかなり良いです、確かにFlotよりも優れたパイです。

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

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

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

https://zoomcharts.com/

チャートの例：