最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Highcharts-ng directive (Angular) not updating - Stack Overflow

programmeradmin2浏览0评论

I'm using highcharts-ng Angular-JS directive to draw a chart on my page.

I am hoping to be able to update the data in my controller, and have these values reflected in the graph. However, when I update a $scope variable using assignment eg:

$scope.chartData = [1, 2, 3];

...then the graph is not updated. The only way I can get the graph updated is to push a value into the data, eg:

$scope.chartData.push(4);

...however this works only the first time it is performed. Here's a JS-fiddle showing what I mean: /

I'm new to Angular so I wanted to check whether there is an obvious problem with my Angular code (maybe I misunderstand $scope and two way bindings?) before I start blaming the third party directive.

Thanks in advance!

Edit:

So it appears (in this fiddle: /) that Angular does see the change in chartData (I've put a watch with an alert on it), but only when watch is called with "true" for equality. All the watches in the directive use 'true', so I'm stumped...

I'm using highcharts-ng Angular-JS directive to draw a chart on my page.

I am hoping to be able to update the data in my controller, and have these values reflected in the graph. However, when I update a $scope variable using assignment eg:

$scope.chartData = [1, 2, 3];

...then the graph is not updated. The only way I can get the graph updated is to push a value into the data, eg:

$scope.chartData.push(4);

...however this works only the first time it is performed. Here's a JS-fiddle showing what I mean: http://jsfiddle/K6hL8/

I'm new to Angular so I wanted to check whether there is an obvious problem with my Angular code (maybe I misunderstand $scope and two way bindings?) before I start blaming the third party directive.

Thanks in advance!

Edit:

So it appears (in this fiddle: http://jsfiddle/K6hL8/) that Angular does see the change in chartData (I've put a watch with an alert on it), but only when watch is called with "true" for equality. All the watches in the directive use 'true', so I'm stumped...

Share Improve this question edited Jan 25, 2014 at 21:00 Pablojim 8,5828 gold badges47 silver badges69 bronze badges asked Jan 3, 2014 at 18:38 Jack ShepherdJack Shepherd 1654 silver badges12 bronze badges 2
  • 2 Author of the directive here. There was a bug that has now been fixed. Your jsfiddle now works! – Pablojim Commented Jan 25, 2014 at 20:40
  • Hi - thanks for letting me know - and for the directive too! – Jack Shepherd Commented Jan 26, 2014 at 21:34
Add a ment  | 

1 Answer 1

Reset to default 8

You are modifying a temporary data variable which is used to apply to actual chart. You need to modify directly .series data

    var data  = $scope.chartConfig.series[0].data;
    $scope.chartConfig.series[0].data = data.concat([data.length]);   

http://jsfiddle/K6hL8/4/

发布评论

评论列表(0)

  1. 暂无评论