Question

我创建了一个Column高图，我必须为它创建分页。

我如何通过前进，后退，下一个，之前的控制来实现分页？

我的柱形图代码如下，

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

<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完成此操作。你为你的＆＃34;窗口设置了一个参数化。每页并更新每次点击的极值。可以在两组主要代码中完成。

1）在加载时，您将窗口设置为＆＃34;开始＆＃34;图表：

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示例。

柱形图中的分页与Previous，Next控件？

1 个答案: