Highchart bar pagination

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