44

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

4

7 に答える 7

52

angular-chartsは、 angular とD3でチャートを作成するために私が書いたライブラリです。

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

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

angular-charts デモが利用可能です。

于 2013-12-04T06:25:04.260 に答える
16

Highchartsを利用する素晴らしい AngularJS チャート ソリューションをいくつか見てきました。GitHub には AngularJS の統合を容易にするためのhighcharts-ngディレクティブがあり、JSFiddle にはいくつかの 例があり、何が可能かを簡単に味わうことができます。

次のように 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 は、非営利目的のクリエイティブ コモンズ ライセンスの下で無料で利用できます。営利/商用シナリオでチャート オプションを探している場合は、製品を購入するか、他の場所を探す必要があります。

于 2013-10-17T06:17:56.790 に答える
6

D3.js を試してみましたか? これが良い例です。

于 2013-10-17T05:48:21.960 に答える
5

素敵な js チャート ライブラリhttp://tenxer.github.io/xcharts/である xCharts の角度ディレクティブを作成しました。bower を使用して簡単にインストールできます: https://github.com/radu-cigmaian/ng-xCharts

Highcharts もソリューションですが、商用利用は無料ではありません。

于 2014-03-22T10:02:43.773 に答える