5

angularで剣道チャートを試していますが、データの表示に問題があります。コードは次のとおりです。

HTML:

<div  kendo-chart="rchart" data-k-options="chartOptions" data-role="chart" class="k-chart" style="position: relative;"></div>

Javascript:

resultService.getResult().then(function (resultResponse) {
         $scope.data = resultResponse.data;
         $scope.oldReps = _.pluck($scope.data.TreningScores.Item1, 'Item2');
         $scope.newReps = _.pluck($scope.data.TreningScores.Item2, 'Item2');
         $scope.categories = _.pluck($scope.data.TreningScores.Item1, 'Item1');
     });


$scope.chartOptions = {

         legend: {
             position: "bottom"
         },
         seriesDefaults: {
             type: "column"
         },
         series: [{
             name: "Total Visits",
             data: $scope.oldReps
         }, {
             name: "Unique visitors",
             data: $scope.newReps
         }],
         valueAxis: {
             line: {
                 visible: false
             }
         },

         tooltip: {
             visible: true,
             format: "{0}"
         }
     };

問題は、データがサーバーからフェッチされた後にチャートが更新されないことです。次のようにチャートを更新しようとしました(ただし、うまくいきません):

$scope.chart = {        
        refreshChart : function() {
            $scope.rchart.refresh();
        },
    };

そして、このメソッドを次のように呼び出します。

resultService.getResult().then(function (resultResponse) {});

$scope.chartOptionsまた、同じ関数内で定義しようとしましたが、何もしませんでした。これを修正する方法はありますか?

4

3 に答える 3

0

あなたの問題は、結果サービスのデータが取得される前に $scope.chartOptions が設定されていることだと思います。この場合、Angular は空の配列を返し、後でデータを入力します。しかし、 $scope.chartOptions は新しいデータで更新されません。

あなたはで試すことができます

$scope.$watchCollection('oldReps', function(newData, oldData) {
  $scope.chartOptions.series[0].data = newData;
});
$scope.$watchCollection('newReps', function(newData, oldData) {
  $scope.chartOptions.series[1].data = newData;
});

そのため、oldReps または newReps が変更された場合、chartOptions が更新されます。

私は同様の問題を抱えていましたが、 $watchCollection は私の一日を救いました (データのキャッシュとチャートの別のオブジェクトの更新は機能しません)

于 2014-02-02T19:21:17.107 に答える