Question

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

。通过研究，我发现了这个示例[http://jsfiddle.net/wergeld/xvxjpvte/][2]
我知道可以在bar选项中使用它：

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

高图栏分页

1 个答案: