javascript - 显示带有部分给定数据的 Highcharts

Question

所以我使用“堆叠列”，给出这个例子

$("#chart_container").highcharts({
  chart: {
    type: 'column'
  },
  xAxis: {
    categories: ['one', 'two', 'three', 'four', 'five', 'six']
  },
  series: [{
    name: 'red',
    data: [1,1,22,4,2,5]
  }]
})

因此，场景是在图表上仅显示二、三、四，然后每当用户单击左/右箭头，数据将左移或右移。例如，当用户单击向左箭头时，图表将显示一、二、三

我们是否可以通过 Highcharts 本身来实现这一目标？ (没有添加任何自定义 JavaScript)

Answer 1

据我所知，没有内置任何东西来支持这一点，但相当少量的 Javascript 与一些 Highcharts 函数相结合就足够了。

例如，将 jQuery 与 Highcharts setExtremes 结合使用，它看起来像这样:

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
            chart.xAxis[0].setExtremes(chart.xAxis[0].min-1, chart.xAxis[0].max-1);
        break;

        case 39: // right
            chart.xAxis[0].setExtremes(chart.xAxis[0].min+1, chart.xAxis[0].max+1);
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

参见this JSFiddle demonstration它在行动中。要在开始和结束时限制它，您可以根据您的类别和跨度宽度添加一些逻辑，如 this example 中所示。 .