Angular-图表条形图在我更改数据、系列、标签时不更新

Question

我正在尝试根据以下代码创建向下钻取条形图： https://shaynedcoder.wordpress.com/2016/10/14/angular-chart-drilldown/comment-page-1/#comment-10 我创建了一个对象，其中包含一个主图表、一个向下钻取图表列表和一个临时图表。模板中的图表指令设置为显示主图表的数据、系列和标签。此代码的作用是将主图表切换为向下钻取图表。我使用 chrome 检查了切换是否正在发生，但不知何故图表没有发生任何变化。

这是模板：

这是我的控制器

var app = angular.module('app', ["chart.js"]).controller('ChartController',['$scope', function($scope){
 
  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
    };
     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],
          [15,24,67,43,11],
          [42,11,67,90,42]],
        colors: colors,
        options: options,
    };
     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,
    };

     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,
    };

     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,
    };

     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,
    };

     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
 };
 $scope.charts = chart1;


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

 }

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


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

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

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

 </body>


</html>

Answer 1

用 $timeout 包裹向下钻取以触发摘要循环：

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

Angular-图表条形图在我更改数据、系列、标签时不更新

Angular-Charts bar chart does not update when I change the data, series, labels

angularjs

chart.js

angular-chart