Heightcharts：平滑的放大/缩小距离

Question

如何使用按钮平滑放大和缩小图表？下面，我给出了图形的代码近似值。（如果这很重要：我每秒都有数据。）

var min = chart.xAxis[0].getExtremes().min,
max = chart.xAxis[0].getExtremes().max;
chart.xAxis[0].setExtremes((min + 12 * 2000),(max - 12 * 2000));

Answer 1

缩放平滑度取决于图表上渲染点的数量。我已经注意到，如果禁用了dataGrouping并且点数少于250，动画效果很好。

演示：https://jsfiddle.net/BlackLabel/hj5Lyda7/

var chart = Highcharts.stockChart('container', {
  chart: {
    animation: true
  },

  title: {
    text: 'AAPL Stock Price'
  },

  series: [{
    name: 'AAPL',
    data: data,
    dataGrouping: {
      enabled: false
    }
  }]
});

document.getElementById("btn").addEventListener('click', function() {


  var min = chart.xAxis[0].getExtremes().min,
    max = chart.xAxis[0].getExtremes().max;

  chart.xAxis[0].setExtremes((min + 24 * 3600 * 1000), (max - 24 * 3600 * 1000), true, {
    duration: 2000
  }); //12 hrs on min and 12hrs on max, summarised it is one day.
}) 

恐怕无法保持更多的平滑度，必须使用rangeSelector功能更改显示范围。