Highchart酒吧分页

Question

我有一个动态条形图，显示表格中的数据。由于数据量很大，我需要在条形图中添加一个分页，如下所示：

通过我的研究，我发现了这个例子[http://jsfiddle.net/wergeld/xvxjpvte/][2] 在哪里我了解到我可以在栏选项中使用：

events: {
load: function() {
this.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);
});

。不幸的是，我不想以这种方式进行分页。

我的图表代码在下面发布任何人都可以帮助我像上面显示的图像一样进行分页。

任何帮助都非常感激。

 <div id="container" style="min-width: 310px; height: 800px; max-width: 600px; margin: 0 auto"></div>

$(document).ready(function() {

var dataSum=600;

var options = {
chart: {
renderTo: 'container',
type: 'bar',
marginRight: 130,
marginBottom: 25,
events: {
load: function() {
this.xAxis[0].setExtremes(0, 19);
}
},
},
title: {
text: 'Report<br/>'
},
subtitle: {
text: '600 Diagnosticos Por Servicios<br/>2019-01-02 - 2019-02-03'
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: '',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' servicios'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter:function() {
var pcnt = (this.y / dataSum) * 100;
return Highcharts.numberFormat(pcnt) + ' %';
}
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
}, 
scrollbar: {
enabled: true
},
credits: {
enabled: false
},
series: []
}

$.getJSON("<?php echo site_url('admin_medico/bar2data');?>", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});

json格式是这样的：

[{"name":"Descrip","data":["INFERTILIDAD FEMENINA, NO ESPECIFICADA(N979)",
"TRICOMONIASIS UROGENITAL(A590)",
"LEIOMIOMA INTRAMURAL DEL UTERO(D251)",
"ENFERMEDAD INFLAMATORIA PELVICA FEMENINA POR GONOCOCOS (A54.2\u2020)(N743*)",
"INCONTINENCIA URINARIA POR TENSION(N393)",
"HIPERTENSION ESENCIAL (PRIMARIA)(I10)"]},
{"name":"Diagnostico","data":[3,2,2,1,1,1]}]

Answer 1

与您提供的示例类似，您可以使用Highcharts.SVGRenderer创建按钮。在click事件中，您需要使用具有正确值的setExtremes方法：

Highcharts.chart('container', {
    chart: {
        marginBottom: 100
    },
    legend: {
        enabled: false
    },
    series: [{
        type: 'column',
        data: getData(100)
    }]
}, function(chart) {
    var dataLength = chart.series[0].data.length,
        buttonsNum = 3,
        btnTop = chart.plotHeight + chart.plotTop + 40,
        options = {
            str: '<<',
            x: 0,
            y: btnTop,
            step: dataLength / buttonsNum
        };

    chart.xAxis[0].setExtremes(0, options.step);
    chart.customBtns = [];

    for (var i = 0; i < buttonsNum; i++) {
        if (!i) {
            renderBtn(options, chart);
            options.str = '<';
            renderBtn(options, chart);
        }
        options.str = i + 1;
        renderBtn(options, chart);

        if (i === buttonsNum - 1) {
            options.str = '>';
            renderBtn(options, chart);
            options.str = '>>';
            renderBtn(options, chart);
        }
    }
    placeBtns(chart);
});

function renderBtn(options, chart) {
    chart.customBtns.push(chart.renderer.button(
            options.str,
            options.x,
            options.y,
            function() {
                setRange.call(this, options, chart.xAxis[0]);
            })
        .attr({
            width: 20
        })
        .add());

    options.x += options.width;
}

function setRange(options, axis) {
    var textStr = this.text.textStr,
        min,
        max;

    if (Highcharts.isNumber(textStr)) {
        min = (textStr - 1) * options.step;
        max = (textStr - 1) * options.step + options.step;
    } else {
        switch (textStr) {
            case '<<':
                min = 0;
                max = options.step;
                break;

            case '<':
                if (!axis.min) {
                    min = axis.min;
                    max = axis.max;
                } else {
                    min = axis.min - options.step;
                    max = axis.min;
                }

                break;

            case '>>':
                min = axis.dataMax - options.step + 1;
                max = axis.dataMax + 1
                break;

            case '>':
                if (axis.max >= axis.dataMax) {
                    min = axis.min;
                    max = axis.max;
                } else {
                    min = axis.max;
                    max = axis.max + options.step;
                }
                break;
        }
    }

    axis.setExtremes(min, max);
}

function placeBtns(chart) {
    var btns = chart.customBtns,
        btnsWidth = 0,
        x;

    btns.forEach(function(btn) {
        btnsWidth += btn.getBBox().width
    });

    x = (chart.chartWidth - btnsWidth) / 2;

    btns.forEach(function(btn) {
        btn.attr({
            x: x
        });
        x += btn.getBBox().width
    });
}

现场演示：http://jsfiddle.net/BlackLabel/xu95fg7L/

API参考：

https://api.highcharts.com/class-reference/Highcharts#.isNumber

https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button