Highchart столбчатой ​​диаграммы пагинацию

Question

Мне нужно, чтобы показать столбчатую диаграмму с пагинацией я нужна PAGINATION структура/варианты, как это: -

[First Previous 12 13 14 15 Next Last] 

первой страницы нужно показать только эти значения,

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

2-я страница должна показывать только эти значения

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

3-я страница должна быть выполнена вл только эти значения,

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

на основе xAxis - Categories значений подсчитывать я хочу показать PAGINATION

Есть пример кода в этой ссылке: 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/