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()を使用してください。あなたのケースではそう

、第一号店チャートオブジェクト：JavaScriptコンソールで

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