web-dev-qa-db-ja.com

angularjsを使用してチャートを作成する

また、Angular.JSディレクティブとうまく調和するチャートソリューションも検討しています。私はいくつかに出くわしましたが、本当に混乱しました。 Angular.JSモジュールと統合されたインタラクティブなチャートを作成する方法についての提案はありますか？

angularjscharts
43
Hmahwish

angular-charts は、angularおよび D でチャートを作成するために作成したライブラリです。

1つのangularディレクティブでD3を使用して作成できる基本的なチャートをカプセル化します。また、次のような機能も提供します

  1. ワンクリックでチャートを変更。
  2. 自動ツールチップ。
  3. コンテナの自動調整。
  4. 伝説;
  5. 単純なデータ形式：xで必要なものとyで必要なものだけを定義します。

angular-charts demo が利用可能です。

52
Chinmay Kulkarni

Highcharts を利用するいくつかのNice AngularJSチャートソリューションを見てきました。 GitHubには、AngularJSとの統合を容易にする highcharts-ng ディレクティブがあり、JSFiddleには someexamples があり、可能なことをすばやく確認できます。

次のように、JS側でチャートを設定します。

$scope.chart = {
    options: {
        chart: {
            type: 'bar'
        }
    },
    series: [{
        data: [10, 15, 12, 8, 7]
    }],
    title: {
        text: 'Hello'
    },
    loading: false
}

そして、次のようにHTMLでそれを参照します。

<highchart id="chart1" config="chart"></highchart>

使用法/ライセンスに関する警告：Highchartsは、非営利的な使用のためにCreative Commonsライセンスの下で無料で利用できます。営利/商業シナリオでチャートオプションを探している場合は、製品を購入するか、他の場所を調べる必要があります。

16
ajk

ZingChartライブラリ には、社内で構築された AngularJSディレクティブ があります。機能が含まれます：

  • ZingChartライブラリ全体（すべてのチャート、マップ、機能）へのフルアクセス
  • Angularの2方向データバインディングを利用して、データとチャート要素を簡単に更新できます

  • 開発チームからのサポート

    ...
$scope.myJson = {
type : 'line',
   series : [
      { values : [54,23,34,23,43] },{ values : [10,15,16,20,40] }
   ]
};
...

<zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>

コード例を含む完全なデモ が利用可能です。

16
RockinSocks

D3.jsを試しましたか？良い 例 です。

6
D.S

Nice js chart library http://tenxer.github.io/xcharts/ であるxCharts用のangularディレクティブを作成しました。 bowerを使用して簡単にインストールできます： https://github.com/radu-cigmaian/ng-xCharts

ハイチャートも解決策ですが、商用利用には無料ではありません。

5
radu.cigmaian

ここでより有用なリソースを収集するには：

前述のように、D3.jsは間違いなくチャートの最適な視覚化ライブラリです。 AngularJSで使用するために、私は angular-chart を開発しました。 D3.jsとAngularJS 2-Way-DataBindingを接続する使いやすいディレクティブです。この方法では、構成オプションを変更するたびにチャートが自動的に更新され、同時にチャートはその状態（ズームレベルなど）を保存して、AngularJSの世界で利用できるようにします。

examples を確認して、確信を得てください。

3
Max Klenk

AngularJSグラフ作成プラグインとFusionChartsライブラリを使用して、インタラクティブなJavaScriptグラフとグラフをWeb /モバイルアプリケーションに追加します（1つのディレクティブのみ）。リンク： http://www.fusioncharts.com/angularjs-charts/#/demos/ex1

2
Vishalika