重绘方法不刷新极坐标图

Question

我有一个类似的问题，就像在highchart chart redraw method is not refreshing the chart 上发布的一样，但我正在使用极坐标图，所以那里给出的解决方案不能解决我的问题。

所以，下面的代码正确显示了高图，但没有刷新数据。现在我正在寻求建议/帮助如何解决它。

$(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: 0,
    },
    tooltip: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    // the value axis
    xAxis: {
      tickInterval: 15,
      min: 0,
      max: 360,
      labels: {
        formatter: function() {
          return this.value + '°';
        }
      }
    },

    plotOptions: {
      series: {
        pointStart: 0,
        pointInterval: 30,
        marker: {
          enabled: false
        },
      },
    }
  };

  // The polar chart
  $('#graph-1').highcharts(Highcharts.merge(polarOptions, {
    yAxis: {
      tickInterval: 5,
      min: 0,
      max: 25,
      visible: false
    },
    credits: {
      enabled: false
    },
    series: [{
        type: 'line',
        name: 'Direction',
        data: [
          [0, 0],
          [direction, 20]
        ],
        lineColor: '#7cb5ec',
        enableMouseTracking: false,
        visible: true,
        lineWidth: 2,
        zIndex: 8,
      }
    ]
  }));

  function RefreshDataWind()
  {
    var chart = $('#graph-1').highcharts();

    $.getJSON('wind_graph.php?callback=?', function(dataWind)
    {
        var direction = Wind_direction;
        chart.redraw();
    }); 

    chart.redraw();
  }
});
});

更准确地说：如果给定的 Wind_direction 值等于 0（零），那么我需要在图表上显示以下“样条线”：

{
        type: 'spline',
        name: 'CentralCicrleCalmWind1',
        data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
        pointInterval: 30,
        pointStart: 0,
        lineColor: windLineColor,
        enableMouseTracking: false,
        lineWidth: windLineWidth,
        visible: showCentralCicrleCalmWind,
      }, {
        type: 'spline',
        name: 'CentralCicrleCalmWind2',
        data: [2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5],
        pointInterval: 30,
        pointStart: 0,
        lineColor: windLineColor,
        enableMouseTracking: false,
        lineWidth: windLineWidth,
        visible: showCentralCicrleCalmWind,
      }

如您所见，我将“showCentralCircleCalmWind”等附加参数设置为 TRUE 或 FALSE，这取决于我在代码顶部准备的给定“Wind_direction”值和逻辑（此处未粘贴）。 我需要的是：

1. 读取给定 JSON 中变量的值
2. 在javascript代码的开头设置变量“direction”
3. 使用 higcharts 库显示图表
4. 从 JSON 中读取新值
5. 将变量“direction”更改为新值。
6. 显示给定值的新图表
7. 回到第 4 点...

Answer 1

使用setData() 函数可能会解决您的问题（请参阅http://api.highcharts.com/highcharts/Series.setData）。

在您的示例中，我建议如下：

function RefreshDataWind()
{
    var chart = $('#graph-1').highcharts();

    $.getJSON('wind_graph.php?callback=?', function(dataWind)
    {
        var direction = Wind_direction;
        chart.series[0].setData(direction);
        /* assuming "direction" to be an array like [1, 2, 3] */
    }); 

}

以下 Highcharts 演示向您展示了其工作原理：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/series-setdata/

根据您的“Wind_direction”变量的格式，您可能需要在setData() 之前有一个声明，明确将其设为数组，因为这是函数所期望的。

我还建议您删除 chart.redraw() 的第二个实例，因为 setData() 使这变得不必要。

希望对你有帮助！