jquery - 使用 Previous、Next 控件在柱形图中分页？

Question

我创建了一个 Column highchart，我必须为其创建分页。

如何使用前进、后退、下一个、上一个控件实现分页？

我有如下的柱形图代码，

$(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>

分页视觉:

请帮我解决这个分页问题。

Answer 1

这可以通过 setExtremes 来完成.您为每页的“窗口”设置参数化，并在每次点击时更新极值。 这可以在 2 组主要代码中完成。

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);
  });

我保留添加逻辑以防止超出您的范围。这是一个示例 jsFiddle .