Question

我想在高图中实现动画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)

检查小提琴已更新：https://jsfiddle.net/beaver71/18L1nng6/

在highchart

1 个答案: