与Highcharts的实时堆积的区域图

Question

我想以堆叠区域图的形式创建一个包含Highcharts的图表，并以实时更新。

我在动态更新多个堆积区域图表时遇到问题，您可以在下面的小提琴中看到一个示例。

添加新点时，图表看起来会破碎。

是否可以动态更新堆叠的区域图表？

  $(function() {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'area'
    },
    series: [{
      data: [29, 20, 15]
    }, {
      data: [29, 20, 15]
    }, {
      data: [10, 20,15]
    }, {
      data: [10, 20, 15]
    }],
    plotOptions: {
      area: {
        stacking: 'normal',
        lineColor: '#666666',
        lineWidth: 1,
        marker: {
          lineWidth: 1,
          lineColor: '#666666'
        }
      }
    }
  });

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
  // the button action
  $('#button').click(function() {
    chart.series[0].addPoint(getRandomInt(1, 20), true, true);
    chart.series[1].addPoint(getRandomInt(1, 20), true, true);
    chart.series[2].addPoint(getRandomInt(1, 20), true, true);
    chart.series[3].addPoint(getRandomInt(1, 20), true, true);
  });
});

http://jsfiddle.net/yZSzZ/199/