Question

所以我使用“Stacked Column”，给出了这个例子

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

因此，方案是在图表上仅显示两个，三个，四个，然后每当用户点击左< / strong> / 右侧箭头，数据将向左或向右移动。例如，当用户点击左箭头时，图表将显示一个，两个，三个

无论如何我们可以通过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中所示。

显示包含给定数据部分的Highcharts

1 个答案: