Highcharts не может обновить диаграмму, используя angular.js

Question

Я работаю над проектом, который использует Highcharts и Angularjs и извлекает данные с помощью SignalR. Проблема в том, что круговая диаграмма инициализируется правильно, но не может обновить диаграмму данными, поступающими с сервера. вот мой код:

'use strict'; 

angular.module('mbCharts').directive('mbGauge', [ 
    'mbWebMetricsService', 
    function (mbWebMetricsService) { 
     return { 
      // 
      // scope is inherited from the widget using this directive 
      // 
      templateUrl: '/ext-modules/mbCharts/mbGaugeTemplate.html', 

     link: function (scope, el, attrs) { 
      Highcharts.chart(el[0], { 
       chart: { 
        type: 'pie' 
       }, 
       title: { 
        text: scope.title 
       }, 
       plotOptions: { 
        pie: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         dataLabels: { 
          enabled: true, 
          format: '<b>{point.name}</b>: {point.percentage:.1f} %' 
         } 
        } 
       }, 
       series: [{ 
        data: [{ 
         name: "Microsoft Internet Explorer", 
         y: 100 
        }, { 
         name: "Chrome", 
         y: 0, 
         sliced: true, 
         selected: true 
        }] 
       }] 
      }); 

      // locate the widget showing this gauge 
      var widget = el.closest('.gridster-item'); 


      // monitor the widget's size 
      widget.resize(function() { 
       //if (scope.chart != null) { 
       // scope.chart.chartWidth = widget.width(); 
       // scope.chart.chartHeight = widget.height(); 
       //}      
      }); 

      //scope.title = mbWebMetricsService.getTitleForMetric(scope.metric); 
      scope.title = "CPU percentage"; 
      scope.initialized = false; 

      scope.$on('mbWebMetricsService-received-data-event', function (evt, data) { 
       var val = Math.round(data[scope.metric]); 
       scope.chart.series[0].data[0].y = val; 
       scope.chart.series[0].data[1].y = 100 - val; 
      }); 
     } 
    }; 
} 
]); 

Answer 1

Проблема в том, как вы хотите обновлять данные. Речь идет не об изменении параметров в объекте диаграммы, а при использовании надлежащего API. Чтобы обновить точки, используйте chart.series[index].data[pointsIndex].update().

Так что в вашем случае, первый магазин диаграмма объектов:

var myChart = new Highcharts.Chart(el[0], { ... }); 

Затем обновите точки:

scope.$on('mbWebMetricsService-received-data-event', function (evt, data) { 
    var val = Math.round(data[scope.metric]); 
    myChart.series[0].data.update(val); 
    myChart.series[0].data.update(100 - val); 
});