2016-04-06 17 views
0

私はWebアプリケーションでチャートを使用しています。そのために、角度チャートを使用しています。 チャートのhtmlファイルは角度jsのチャートにデータを動的に追加

<canvas id="pie" class="chart chart-pie" chart-data="data" 
    chart-labels="labels"> 
    </canvas> 

であり、このためのコントローラファイルは

angular.module('myApp') 
    .controller('myController', function ($scope) { 

    $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"]; 
    $scope.data = [300, 500, 100]; 
    }); 

は、今私はちょうどこの円グラフにデータを動的に追加する方法を知りたいです。事前

+0

使用しているチャートライブラリは何ですか? – Sajeetharan

+0

私はChart.jsとangular-chart.jsを使用しています。 –

+0

データをデータ&ラベル配列に動的にプッシュする – lanlau

答えて

1

おかげであなたは、あなたがあなたのチャートがバインドされている配列を移入クリックすると、ボタンがある場合があります。

$scope.onClick = function(item,label) 
{ 
    //item and label can come from anywhere, i just add here as parameters to illustrate as example 
    $scope.data.push(item); 
    $scope.labels.push(label); 
} 
0

データをグラフに動的に追加するには、データ配列とラベル配列の両方にデータをプッシュする必要があります。

注:データ配列は実際には配列ではなく、配列内の配列です。したがって、データは[]ではなく、むしろ[[]]です。

コードそれを動作させるために:

  1. $スコープ使用している場合:$scope.data[0].push(data) and also $scope.labels.push(label)
  2. をVMを使用している場合:vm.data[0].push(data) and also vm.labels.push(label)
関連する問題