如何更新条形图及其图例，而无需在高图中重新绘制它

我想更新堆叠的条形图而不用重新绘制它。数据来自AJAX请求。我的示例代码是在这里http://jsfiddle.net/my8646oc/47/如何更新条形图及其图例，而无需在高图中重新绘制它

$(function() { 
    $('#container').highcharts({ 

     chart: { 
     type: 'bar', 
      animation: { 
       duration: 1000 
      } 
     }, 
     plotOptions: { 
      series: { 
      stacking: 'normal' 
      } 
     }, 
     legend: { 
        symbolHeight: '0', 
        layout: 'horizontal', 
        verticalAlign: 'top', 
        horizontalAlign: 'right', 
        labelFormatter: function() { 
         return '<span>' + this.name + ': ' + this.yData[ 0 ] + '</span>'; 
        }, 

        y: -15, 
        useHTML: true 
       }, 

     xAxis: { 
      categories: [] 
     }, 

     series: [{ 
      data: [29.9], 
      name: 'one' 
     }, 
     {   data: [39.9], 
     name: 'two' 
}] 

    }); 

    var i = 1; 
    $('#update').click(function() { 
     var chart = $('#container').highcharts(); 
     var newData = [{ 
      data: [39.9], 
      name: 'one' 
     }, 
     {   data: [49.9], 
     name: 'two' 
}]; 
     //chart.series[0].update({ 
     // name: "TEST" + i++, 
     // data : 
     //}); 

     var ctr, 
        count, 
        len = chart.series.length, 
        len2 = newData.length; 
       for (ctr = 0; ctr < len; ctr = ctr + 1) { 
        for (count = 0; count < len2; count = count + 1) { 
         if (newData[ count ].name === chart.series[ ctr].name) { 
          chart.series[ ctr ].setData(newData[ count ].data[ 0 ]); 
          delete newData[ count ]; 
          break; 
         } 
        } 
       } 


    }); 
});

我一直在使用使用setData尝试和仅更新系列，在这种情况下，只有栏更新不是传说。任何适当的解决方案？任何人？？

来源

2016-07-25 k.p

我不知道highcharts.js，但通过将数据列作为数组传递，图表可以工作。

chart.series[ ctr ].setData(newData[ count ].data[0]);

变化

chart.series[ ctr ].setData(newData[ count ].data);

更新演示

Demo

来源

2016-07-25 10:27:03 slashsharp

仅第一数据更新在酒吧和也在图例中没有变化（数据在传说没有更新） –

我已经更新了演示，它现在显示了这两个值。对于图例，你需要阅读[文档]（http://api.highcharts.com/highcharts） – slashsharp

嗨Slashsharp，我也实现了这一点（我已经在问题的代码下面说明了这一点）。我的挑战是更新传说。浏览文档，但没有发现。你能否提出建议来更新图例呢？ –

为此，您需要使用series.update（）代替series.setData（）。

代码：

chart.series[ ctr ].update({ data: newData[ count ].data[ 0 ] });

更新拨弄：

http://jsfiddle.net/jlbriggs/my8646oc/50/

在这种情况下

来源

2016-07-25 13:12:26 jlbriggs

它给出了一些错误@jlbriggs。它没有更新 –

你能更具体吗？它正在为我更新。 – jlbriggs

带有'one'名称的数据在图例中未定义，图中只显示名称为'two'的小节@jibriggs –

如何更新条形图及其图例，而无需在高图中重新绘制它

回答

相关问题