javascript - 在 highcharts 中生成动画 plotLines

Question

我想在 highchart 中实现一个 x 轴 plotLines 动画。当我点击播放按钮时，每隔一秒就会生成一条新的情节线来替换 x 轴上的最后一条情节线。

请看这个fiddle .当我点击 click 按钮时，它工作正常。当我点击 play 按钮时。它只显示第一条和最后一条情节线。

var chart = Highcharts.chart('container', {

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    plotLines: [{
      value: 0,
      color: 'blue',
      width: 2,
      zIndex: 10
    }]
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});


var drawNextPlotline = function(chart) {
  //console.log(i);
  //console.log(chart.xAxis[0].options);
  var newValue = (chart.xAxis[0].options.plotLines[0].value + 1) % 10;
  //var newValue = i;
  chart.xAxis[0].options.plotLines[0].value = newValue;
  chart.xAxis[0].update();
}

function sleep(miliseconds) {
  var currentTime = new Date().getTime();

  while (currentTime + miliseconds >= new Date().getTime()) {}
}

// the button action
var $playButton = $('#play');
var $clickButton = $('#click');

//
$playButton.click(function() {

  for (var i = 0; i <= 2; i++) {
    drawNextPlotline(chart);
    sleep(1000);
  }

});

$clickButton.click(function() {

    drawNextPlotline(chart);

});

Answer 1

如果您将 drawNextPlotline 函数插入到 setInterval() 中，您可以避免像在 for...loop 中那样阻止浏览器呈现:

var i = 0, nr = 5;
var intervalId = setInterval(function() {   
   if (i < nr) {
     drawNextPlotline(chart);
   } else {
     clearInterval(intervalId);
   }
   i++;
}, 1000)

检查更新的 fiddle :https://jsfiddle.net/beaver71/18L1nng6/