javascript - 动态更改 HighCharts 中的 startAngle 值

Question

我想从 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 不是函数”。

所以我是堆栈。请帮忙。

Answer 1

您应该能够使用 Chart.update() 更新所有图表选项。不幸的是，它看起来对 Pane 没有任何影响 - 我报告了该问题 here .

现在您可以以老式方式更新 Pane - 通过销毁并创建新图表 - http://jsfiddle.net/highcharts/qhY8C/

另一种可能性是尝试解决方法 - 设置 Pane 选项，删除 Pane 并更新轴 - 它应该使用新选项创建一个新 Pane 。

  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/