Jquery 是否使用上一个、下一个控件在柱状图中分页？

我已经创建了一个列高图表，我必须为它创建分页

如何使用“前进”、“后退”、“下一步”和“上一步”控件实现分页

我的柱状图代码如下所示

$(function () {
    $('#ao-demand-distribution').highcharts({
        chart: {
            type: 'column',
            spacingBottom: 0,
            spacingTop: 0,
            spacingLeft: 0,
            spacingRight: 0,

        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                'S1',
                'S2',
                'S3',
                'S4',
                'S5',
                'S6',
                'S7',
                'S8'
            ],
            crosshair: false,
            gridLineWidth: 0,
            tickWidth : 0
        },
        yAxis: {
            min: 0,
            max: 150,
            title: {
                text: ''
            },
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'S1',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]

        }, {
            name: 'S2',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3]

        }]
    });
});

HTML代码：

<div class="ao-demand-pagination">
                                    <a class="demand-pagination-btn btn-white" id="" href="javascript:void(0);"><i class="fa fa-step-backward"></i></a>
                                    <a class="demand-pagination-btn btn-white" id="" href="javascript:void(0);"><i class="fa fa fa-chevron-left"></i></a>
                                    <a class="demand-pagination-btn btn-white" id="" href="javascript:void(0);"><i class="fa fa fa-chevron-right"></i></a>
                                    <a class="demand-pagination-btn btn-white" id="" href="javascript:void(0);"><i class="fa fa-step-forward"></i></a>

                                </div>

分页视觉：

请帮助我修复此分页。

这可以用。为每页的“窗口”设置参数化，并在每次单击时更新极值。 这项工作可以在两组主要代码中完成

1） 加载时，将窗口设置为图表的“开始”：

chart: {
  events: {
    load: function() {
      this.xAxis[0].setExtremes(0, 5);
    }
  }
},

2） 然后将逻辑应用于按钮功能以允许分页：

  var stepWidth = 5;
  // the button action
  $('#beginning').click(function() {
    var chart = $('#container').highcharts();
    chart.xAxis[0].setExtremes(0, 5);
  });

  $('#forward').click(function() {
    var chart = $('#container').highcharts();
    var currentMin = chart.xAxis[0].getExtremes().min;
    var currentMax = chart.xAxis[0].getExtremes().max;

    chart.xAxis[0].setExtremes(currentMin + stepWidth, currentMax + stepWidth);
  });

  $('#back').click(function() {
    var chart = $('#container').highcharts();
    var currentMin = chart.xAxis[0].getExtremes().min;
    var currentMax = chart.xAxis[0].getExtremes().max;

    chart.xAxis[0].setExtremes(currentMin - stepWidth, currentMax - stepWidth);
  });

  $('#ending').click(function() {
    var chart = $('#container').highcharts();
    chart.xAxis[0].setExtremes(9, 11);
  });

---

我将添加逻辑以防止超出范围。这是一个示例。

您的分页控件是什么样子的？我将编辑问题并更新HTML代码