在HighCharts中动态更改startAngle值(Dynamically change startAngle value in HighCharts)

我想从JSON'Wind_direction'值动态更改极坐标图上的startAngle值。代码如下：

$(function() { $.getJSON('wind_graph.php?callback=?', function(dataWind) { var direction = Wind_direction; var polarOptions = { chart: { polar: true, events : { load : function () { setInterval(function(){ RefreshDataWind(); }, 1000); } } }, title: { text: 'Wind Direction' }, pane: { startAngle: direction, }, xAxis: { tickInterval: 15, min: 0, max: 360 }, plotOptions: { series: { pointStart: 0, pointInterval: 30, }, } }; // The polar chart $('#graph-1').highcharts(Highcharts.merge(polarOptions, { yAxis: { tickInterval: 5, min: 0, max: 25, visible: false }, series: [{ type: 'line', name: 'Direction', data: [ [0, 0], [direction, 20] ], } ] })); function RefreshDataWind() { var chart = $('#graph-1').highcharts(); $.getJSON('wind_graph.php?callback=?', function(dataWind) { var direction = Wind_direction; chart.series[0].setData([[0,0],[direction, 20]]); }); } }); });

在最后一个函数中，在'chart.series [0] .setData下面...我试图添加这样的东西：

chart.pane.setStartAngle(direction);

但是这会引发错误：“无法读取未定义的属性'startAngle'”

还在尝试另一个想法：

polarOptions.pane({ startAngle: direction });

但这里有错误：“polarOptions.pane不是一个函数”。

所以我是堆栈。请帮忙。

I want to dynamically change the startAngle value on my polar chart from JSON 'Wind_direction' value. The code is below:

$(function() { $.getJSON('wind_graph.php?callback=?', function(dataWind) { var direction = Wind_direction; var polarOptions = { chart: { polar: true, events : { load : function () { setInterval(function(){ RefreshDataWind(); }, 1000); } } }, title: { text: 'Wind Direction' }, pane: { startAngle: direction, }, xAxis: { tickInterval: 15, min: 0, max: 360 }, plotOptions: { series: { pointStart: 0, pointInterval: 30, }, } }; // The polar chart $('#graph-1').highcharts(Highcharts.merge(polarOptions, { yAxis: { tickInterval: 5, min: 0, max: 25, visible: false }, series: [{ type: 'line', name: 'Direction', data: [ [0, 0], [direction, 20] ], } ] })); function RefreshDataWind() { var chart = $('#graph-1').highcharts(); $.getJSON('wind_graph.php?callback=?', function(dataWind) { var direction = Wind_direction; chart.series[0].setData([[0,0],[direction, 20]]); }); } }); });

In the last function, below 'chart.series[0].setData... I was trying to add something like this:

chart.pane.setStartAngle(direction);

but this throws the error: "Cannot read property 'startAngle' of undefined"

Also was trying another one idea:

polarOptions.pane({ startAngle: direction });

but here is error: "polarOptions.pane is not a function".

So I'm stack. Please for help.

最满意答案

您应该能够使用Chart.update（）更新所有图表选项。不幸的是，它看起来对窗格没有任何影响 - 我在这里报告了这个问题。

现在，您可以通过破坏和创建新图表来更新窗格 - http://jsfiddle.net/highcharts/qhY8C/

另一种可能性是尝试解决方法 - 为窗格设置选项，删除窗格并更新轴 - 它应该创建一个带有新选项的新窗格。

const xAxis = chart.xAxis[0]; chart.options.pane.startAngle = 45; Highcharts.erase(chart.panes, xAxis.pane); chart.yAxis[0].update(null, false); xAxis.update();

示例： http ： //jsfiddle.net/v8L381Lj/

You should be able to update all chart options with Chart.update(). Unfortunately, it looks that it does not have any effect on pane - I reported the issue here.

Now you can update the pane in old-fashioned way - by destroying and creating a new chart - http://jsfiddle.net/highcharts/qhY8C/

The other possibility is trying the workaround - set options for pane, remove the pane and update the axis - it should create a new pane with new options.

const xAxis = chart.xAxis[0]; chart.options.pane.startAngle = 45; Highcharts.erase(chart.panes, xAxis.pane); chart.yAxis[0].update(null, false); xAxis.update();

example: http://jsfiddle.net/v8L381Lj/

更多推荐