當我更改數據，系列，標籤時，Angular-Charts條形圖不會更新

Question

我試圖根據此代碼創建一個下拉條形圖： https://shaynedcoder.wordpress.com/2016/10/14/angular-chart-drilldown/comment-page-1/#comment-10 我創建了一個包含主圖表的對象，深入圖表和臨時圖表。模板中的圖表指令設置爲顯示主圖表的數據，系列和標籤。這段代碼的功能是它使用下鑽圖表切換主圖表。我使用chrome檢查了開關正在發生，但不知怎的，圖表沒有任何變化。

這裏是模板：

這是我的控制器$timeout

var app = angular.module('app', ["chart.js"]).controller('ChartController',['$scope', function($scope){ 
 
\t 
 
\t var colors = ['#A13030', '#E4882B', '#56932A', '#1D5F8A', '#317C73', '#6E5282']; // color code for all charts 
 
    var options = { // common config of all charts 
 
     legend: { 
 
      display: true, 
 
      position: 'bottom', 
 
     } 
 
    }; 
 
    var primaryDataModel = { //object definition (use as a template) 
 
     header: "", 
 
     labels: [], 
 
     series:[], 
 
     data: [], 
 
     colors: colors, 
 
     options: options, 
 
    }; 
 
    var drilldownDataModel = { //object definition (use as a template) 
 
     header: "", 
 
     labels: [], 
 
     series: [], 
 
     data: [], 
 
     colors: colors, 
 
     options: options, 
 
    }; 
 
    var chartModel = { // object definition (use as a template) 
 
     uid: "", 
 
     primary: null, //obj of primaryDataModel 
 
     drilldown: null 
 
    }; 
 
    \t var primaryData = { //object definition (use as a template) 
 
     header: "Happiness Across Dubai", 
 
     labels: ["Umm Al Rumool","Al Barsha","Wasel Center", "Tasjeel Al Qusais","Dubai Driving Center"], 
 
     series:["Happy", "Neutral", "Unhappy"], 
 
     data: [[33,22,44,11,42], 
 
     \t \t [15,24,67,43,11], 
 
     \t \t [42,11,67,90,42]], 
 
     colors: colors, 
 
     options: options, 
 
    }; 
 
    \t var drilldownDataUmmAlRumool = { //object definition (use as a template) 
 
     header: "Umm Al Rumool", 
 
     labels: ["Male", "Female"], 
 
     series: ["Happy", "Neutral", "Unhappy"], 
 
     data: [[22,31],[52,21],[57,31]], 
 
     colors: colors, 
 
     options: options, 
 
    }; 
 

 
    \t var drilldownDataAlBarsha = { //object definition (use as a template) 
 
     header: "Al Barsha", 
 
     labels: ["Male", "Female"], 
 
     series: ["Happy", "Neutral", "Unhappy"], 
 
     data: [[26,33],[22,61],[17,35]], 
 
     colors: colors, 
 
     options: options, 
 
    }; 
 

 
    \t var drilldownDataWaselCenter = { //object definition (use as a template) 
 
     header: "WaselCenter", 
 
     labels: ["Male", "Female"], 
 
     series: ["Happy", "Neutral", "Unhappy"], 
 
     data: [[59,97],[53,51],[54,32]], 
 
     colors: colors, 
 
     options: options, 
 
    }; 
 

 
    \t var drilldownDataTasjeelAlQusais = { //object definition (use as a template) 
 
     header: "Tasjeel Al Qusais", 
 
     labels: ["Male", "Female"], 
 
     series: ["Happy", "Neutral", "Unhappy"], 
 
     data: [[22,3],[56,12],[87,34]], 
 
     colors: colors, 
 
     options: options, 
 
    }; 
 

 
    \t var drilldownDataDubaiDrivingCenter = { //object definition (use as a template) 
 
     header: "Dubai Driving Center", 
 
     labels: ["Male", "Female"], 
 
     series: ["Happy", "Neutral", "Unhappy"], 
 
     data: [[2,33],[12,71],[37,31]], 
 
     colors: colors, 
 
     options: options, 
 
    }; 
 
    var chart1 = { // object definition (use as a template) 
 
     uid: "barChart", 
 
     primary: primaryData, //obj of primaryDataModel 
 
     drilldown: [drilldownDataUmmAlRumool, drilldownDataAlBarsha, drilldownDataWaselCenter, drilldownDataTasjeelAlQusais, drilldownDataDubaiDrivingCenter], 
 
     temp:null 
 
\t }; 
 
\t $scope.charts = chart1; 
 

 

 
\t $scope.onClick = function(points, evt, barClicked){ 
 
\t \t if (points.length!=0){ 
 
\t \t \t if (barClicked){ 
 
\t \t \t \t $scope.a="s"; 
 
\t \t \t \t var setIndex = barClicked._index;; 
 
\t \t \t \t changeToDrilldown(setIndex); 
 
\t \t \t } 
 
\t \t } 
 

 
\t } 
 

 
\t function changeToDrilldown(setIndex){ 
 
\t \t if ($scope.charts.temp===null){ // check that this chart is not already in a drill down 
 
\t \t \t \t \t $scope.charts.temp = $scope.charts.primary; 
 
\t \t \t \t \t $scope.charts.primary = $scope.charts.drilldown[setIndex]; 
 

 

 
\t \t } 
 
\t } 
 
\t $scope.backClick = function(evt){ 
 
\t \t var chartId = evt.target.id; 
 
\t \t \t \t if ($scope.charts.temp!=null){ 
 
\t \t \t \t \t $scope.charts.primary = $scope.charts.temp; 
 
\t \t \t \t \t $scope.charts.temp = null; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t 
 
}]);

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src="bower_components\angular\angular.min.js"></script> 
 
\t \t <script src="bower_components\chart.js\dist\Chart.min.js"></script> 
 
\t \t <script src="bower_components\angular-chart.js\dist\angular-chart.min.js"></script> 
 
\t \t <script src="ChartController.js"></script> 
 
\t </head> 
 

 
\t <body ng-app="app" ng-controller="ChartController"> 
 
\t <canvas class="chart chart-bar" chart-data="charts.primary.data" chart-labels="charts.primary.labels" chart-options="charts.primary.options" 
 
\t \t chart-series="charts.primary.series" chart-click="onClick" ></canvas> 
 

 
\t </body> 
 

 

 
</html>

Answer 1

包裝明細引發消化週期：

function changeToDrilldown(setIndex){ 
    if ($scope.charts.temp===null){  
    $timeout(function() { 
     $scope.charts.temp = $scope.charts.primary; 
     $scope.charts.primary = $scope.charts.drilldown[setIndex]; 
    }, 0); 
    } 
} 

---

Demo in Plunkr