劍道+角圖表數據

我嘗試了劍道圖表與角度，我有顯示數據的問題，這裏是我的代碼：劍道+角圖表數據

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相同的功能，但裏面什麼也沒有。有沒有什麼辦法解決這一問題？

來源

2014-01-19 hyperN

@喬治 - 布萊頓我有點晚對這個答覆的一方，但看看我的簡化的解決方案和示例：http://stackoverflow.com/a/39739389/1467810 – TaeKwonJoe

它沒有很好的記載，但要獲得與遠程數據綁定後的數據已經從服務器返回更新UI控件需要觀看來自Angular方面的更新集合，並將數據對象重新綁定到Kendo方面的相應UI控件。

在你控制器，注意使用$watchCollection更改的數據對象，並更新對象/屬性被綁定到這些集合：

// API call 
$http.get('...').success(function(data){ 
    $scope.data = data; 
}); 

// KendoUI config object 
$scope.chart = { 
    dataSource: { 
     data: $scope.data 
    } 
}; 

// Watch for changes to $scope.data 
$scope.$watchCollection('data', function(newData) { 

    // Update data bindings with changes 
    $scope.chart.dataSource.data = newData; 
});

在你視圖，定義對象的UI控件應綁定更改時，通過k-rebind角劍道指令作出：

<div kendo-chart k-options="chart" k-rebind="chart"></div>

這裏是綁定到遠程數據的圖表的一個示例：

http://codepen.io/micjamking/pen/4980a5e22cbd4de01264fadae5f25f06

來源

2014-04-30 05:28:56 micjamking

哇！ k-rebind真的很有幫助謝謝！我在哪裏可以找到更多關於它的信息？ –

由kendo團隊自己承認，文檔中缺少'k-rebind'。我不得不通過Angular-Kendo Github repo的封閉問題來找到它：https：//github.com/kendo-labs/angular-kendo/issues/33#issuecomment-20264067。很高興這幫助了別人。 – micjamking

最後我找到了這個問題的答案。謝謝！ –

我覺得你的問題是檢索到的resultService的數據之前$ 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救了我的一天（Caching data and updating another object for an chart does not work）

來源

2014-02-02 19:21:17 KEB

使用$ watchCollection的跟蹤，並在接受的答案和其他分配dataSource.data是不必要卷積的方法。

這裏是一個簡單的實現：

視圖：

<div kendo-chart k-theme='metro' k-options="chart" k-rebind="chart"></div>

控制器：

$scope.chart = { 
    dataSource: new kendo.data.DataSource({ 
    data: [{ title: "Loading", value: 100, color: '#EFEFEF' }] 
    }), 
    series: [{ field: 'value', categoryField: 'title', padding: 0, holeSize: 25 }], 
    seriesDefaults: { type: 'donut', startAngle: 90 } 
};

使用dataSource.data（）方法，而不是作爲數組是所述分配dataSource.data關鍵在於：

payrollService.load(userId).then(function (result) { 
    $scope.chart.dataSource.data(result.items); //where result.items is an array like so: 
    //[ 
    // { title: "Net Pay", value: 60, color: '#6BAE4B' }, 
    // { title: "Taxes", value: 15, color: '#ED6347' }, 
    // { title: "Deductions", value: 25, color: '#8161C2' } 
    //] 
});

Codepen演示： http://codepen.io/TaeKwonJoe/pen/WGOpEv

來源

2016-09-28 06:19:11 TaeKwonJoe

劍道+角圖表數據

回答

相關問題