Question

我需要为我的图表添加分页（Bar）。这样我就可以控制可以显示的条数。有没有人早点尝过这个？

如果可以实现，任何人都可以帮我解决这个问题。

Answer 1

更改图表“数据”背后的基本思想是更新系列信息。因此，当您按下图表的分页按钮时，可以直接更新系列数据。

根据我之前回答的另一个问题，我把一个简单的小提琴示例放在一起。

请在此处查看：http://jsfiddle.net/Robodude/EmMxH/71/

HTML：

<SELECT id="list">
<OPTION VALUE="A">Data Set A
<OPTION VALUE="B">Data Set A + B
<OPTION VALUE="C">Data Set A + B + C       
</SELECT>
<button id="change">Change Data Source</button>

<div id="container" style="height: 400px"></div>

的Javascript / Jquery的：

var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },
    series: []
};

$("#change").click(function(){
if ($("#list").val() == "A")
{
    options.series = [{name: 'A', data: [1,2,3,2,1]}]
}
else if ($("#list").val() == "B")
{
    options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]}]
}
else if ($("#list").val() == "C")
{
    options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]},{name: 'C', data: [1,1,1,1,1]}]
}


var chart = new Highcharts.Chart(options);    
});

这是我帮助回答的上一个问题：Reload chart data via JSON with Highcharts

显然，这是一个非常直截了当的例子。如果您使用更多信息更新您的帖子，我可以进一步扩展这一点。

祝你好运:)

Answer 2

另一种方法是使用axis.setExtremes缩放到第一页，然后更新prev / next页面的参数，而不是图表刷新实际左/右移动。

Answer 3

使用额外的插件Jquery分页插件可以轻松实现highcharts中的分页。

我发现 this 论坛帖子内容丰富且有帮助。

function pageselectCallback(page_index, jq){

var items_per_page = 3,
    max_elem = 5,
    from = page_index * items_per_page,
    to = from + max_elem,
    newcontent = '',
    chartData = [];

//pie.series[0].setData( data.slice(from,to) );
if(typeof pie !== 'object') {
    pie = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        series: [{
            data: []
        }]
    });        
}

pie.series[0].setData( data.slice(from, to) );

// Prevent click eventpropagation
return false;
}

工作演示 here 。

Highcharts中的分页

3 个答案: