时间戳

首页 > 解决方案 > Hightcharts：平滑放大/缩小距离

highcharts - Hightcharts：平滑放大/缩小距离

问题描述

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

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

标签： highcharts

解决方案

缩放平滑度取决于图表上渲染点的数量。我注意到，如果禁用 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 功能更改显示的范围。

推荐阅读