Highcharts 高图分页

我需要包括我的图表（酒吧）分页。这样我就可以控制可以显示的条数。以前有人试过吗

---

如果能做到这一点，有人能帮我解决这个问题吗

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

我根据前面回答的另一个问题，整理了一个简单的提琴示例

在这里查看：

html:

这是我帮助回答的前一个问题：

显然，这是一个非常直接的例子。如果你能用更多的信息更新你的帖子，我可能会对此做进一步的扩展

---

祝你好运：）

另一种方法是利用放大第一页，然后更新上一页/下一页的参数，而不是刷新图表时实际向左/向右移动。

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

我发现论坛帖子信息丰富，很有帮助

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;
}

---

一个有效的演示是

这是最好的答案。

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);    
});

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;
}