Highchart堆积条形图分页

Question

我需要显示与分页 堆积条形图我需要分页结构/选项是这样的： -

[First Previous 12 13 14 15 Next Last] 

第1页需要只显示该值

'Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas' 

第2页只需显示此值

'Apples1', 'Oranges1', 'Pears1', 'Grapes1', 'Bananas1' 

第3页需要sh流量仅此值

'Apples2', 'Oranges2', 'Pears2', 'Grapes2', 'Bananas2' 

基础上，xAxis - Categories值算我想显示分页

在这个环节示例代码：http://jsfiddle.net/38L9nhhs/2/

$(function() { 
$('#container').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Stacked bar chart' 
    }, 
    xAxis: { 
     categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas','Apples1', 'Oranges1', 'Pears1', 'Grapes1', 'Bananas1','Apples2', 'Oranges2', 'Pears2', 'Grapes2', 'Bananas2'] 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Total fruit consumption' 
     } 
    }, 
    legend: { 
     reversed: true 
    }, 
    plotOptions: { 
     series: { 
      stacking: 'normal' 
     } 
    }, 
    series: [{ 
     name: 'John', 
     data: [5, 3, 4, 7, 2,3, 4, 4, 2, 5,2, 2, 3, 2, 1] 
    }, { 
     name: 'Jane', 
     data: [2, 2, 3, 2, 1,5, 3, 4, 7, 2,3, 4, 4, 2, 5] 
    }, { 
     name: 'Joe', 
     data: [3, 4, 4, 2, 5,2, 2, 3, 2, 1,5, 3, 4, 7, 2] 
    }] 
    }); 
    }); 

请帮我的任何一个来实现这一目标

Answer 1

你基本上需要做的是：

1. 创建附加阵列保持基本元件（橙子，苹果，梨等）
2. 构建基于包含在arrCategories阵列中底座元件和元件的数量上页发射寻呼机
3. 装入图第0页这将是默认的页面没有数字附加

下面是相关的代码部分：

HTML

<!-- add a pager below the graph --> 
<div id="page-container">Page: <span id="pager"></span></div> 

JS

// create the arrays outside of the function scope, otherwise accessing elements later-on 
// may cause problems 
var arrBaseCategories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']; 
// arrCategories and arrSeries "data" element must contain the number of arrBaseCategories n-times 
var arrCategories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', 'Apples1', 'Oranges1', 'Pears1', 'Grapes1', 'Bananas1', 'Apples2', 'Oranges2', 'Pears2', 'Grapes2', 'Bananas2']; 
var arrSeries = [{ 
    name: 'John', 
    data: [5, 3, 4, 7, 2, 3, 4, 4, 2, 5, 2, 2, 3, 2, 1] 
}]; 

function showGraph(page) { 

    // number of different elements 
    var numDifferentElements = arrBaseCategories.length; 
    // first element that needs to be extracted from arrCategories and arrSeries 
    var intStartElement = page * numDifferentElements; 

    var arrCurrentSeries = []; 
    var arrCurrentCategories = []; 

    // loop all series for all persons, extract part of the data array for the given page 
    for (var elem in arrSeries) { 

    var arrSubData = []; 

    // extract elements starting from a position based on the page number 
    // from the data array and only pass this one along when creating the chart 
    for (var i = 0; i < numDifferentElements; i++) { 

     arrCurrentCategories.push(arrCategories[intStartElement + i]); 
     arrSubData.push(arrSeries[elem].data[intStartElement + i]); 

    } 
    arrCurrentSeries.push({ 
     name: arrSeries[elem].name, 
     data: arrSubData 
    }); 

    } 

    $('#container').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Stacked bar chart' 
    }, 
    xAxis: { 
     categories: arrCurrentCategories 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
     text: 'Total fruit consumption' 
     } 
    }, 
    legend: { 
     reversed: true 
    }, 
    plotOptions: { 
     series: { 
     stacking: 'normal' 
     } 
    }, 
    series: arrCurrentSeries 
    }); 
} // end function showGraph 

$(function() { 

    // create a pager on start 
    function initialisePager() { 
    var numPages = Math.ceil(arrCategories.length/arrBaseCategories.length); 

    for (i = 0; i < numPages; i++) { 
     var link = '<a href="javascript:showGraph(' + i + ')">' + Math.round(i + 1) + '</a>'; 
     $('#pager').append(link); 
    } 
    } 

    initialisePager(); 
    showGraph(0); 
}); 

完整的小提琴与系列内的不止一个人可以在这里找到：

http://jsfiddle.net/Moonbird_IT/38L9nhhs/7/