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

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

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

ここに、最も印象的で最新のjqPlotの例へのリンクがあります。

フロット

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

インタラクションの観点から見ると、Flot by farはで可能な限りFlashグラフに可能な限り近づけますjQuery。グラフの出力は非常に洗練されていて見栄えが良いですが、データポイントを操作することもできます。つまり、データポイントにカーソルを合わせると、グラフ内のそのポイントの値について視覚的なフィードバックを得ることができます。

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

Flot Zoom機能。

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

スパークライン

制限：円、線、棒、組み合わせ

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

クエリチャート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は、「あなたの母親に見せるようなきれいな棒グラフ」として販売されています。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です。

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

jQueryを使用しても使用しなくても使用できます。

新しいプレーヤーが登場し、非常にスムーズなアニメーションとパフォーマンスのためにCanvasを使用している高度なナビゲーションチャートを提供しています。

https://zoomcharts.com/

チャートの例：

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

このlibの何がクールなのか：

• その他のスライスは拡張できます
• パイは階層構造のドリルダウンを提供します（例を参照）
• 独自のデータソースコントローラーを簡単に作成するか、単純なjsonファイルを提供する
• 高解像度の画像をそのままエクスポート
• フルタッチサポートは、アプリ、iPhone、アンドロイド、などにスムーズに動作します

チャートは、非商用利用、商用ライセンス、およびテクニカルサポートが無料で利用できます。

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

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

JavaScriptのTeeChartを確認する

• 非商用利用は無料です。

• jQuery、Node.js、WordPress、Drupal、Joomla、Microsoft TypeScriptなどのプラグインが含まれています...

• こことここにインタラクティブなデモがあります。

• 一部のデモのスクリーンショット：