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”值以及我在代码顶部准备的逻辑（此处未粘贴）。我需要的是：

读取给定JSON中的变量值
在javascript代码的开头设置变量“direction”
使用higcharts库显示图表
从JSON
将变量“direction”更改为新值。
显示给定值的新图表
回到第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()不需要这样做。

我希望这对你有所帮助！

重绘方法不是刷新极坐标图

1 个答案: