Простий спосіб пагінацію в Highcharts

    
Нещодавно при створенні сторінки статистики на сайті, мені було потрібно в черговому графіку вивести 450 позицій. З причини того, що даний графік бал на сторінці не один, та й виглядав би дуже громіздко на сторінці було прийнято рішення, додати щось на зразок розбиття даних на сторінки. Для графіків в проекті використовується бібліотека Highcrarts . Покопавшись у документації була знайдена тільки пагінація для легенди, але не для графіків.
 
Трохи погуглити було знайдено неробочий рішення з використанням jquery плагіна Paginator і пропозиція довантажувати дані по ajax знову ж для початку зверстати кнопки. Обидва рішення мені не сподобалися поетом я вирішив зробити що небудь своє.
Трохи поміркувавши, я прийшов до висновку, що можна спробувати використовувати для цієї мети компонент Legend додавши обробник події на елементи легенди.
 
Ось код результату для трьох сторінок
 
Далі кілька коментарів:
При генерації сторінки значення осі для першої сторінки задаються спочатку:
 
xAxis: {
    categories: [
    	'Иванов К.С.', 
    	'Петров А.К.', 
    	'Сидоров О.Н.', 
    	'Лазарев Р.В.', 
    	'Ершов В.В.', 
    	'Никитин А.С.', 
    	'Смирнов Н.С.', 
    	'Кузнецов К.С.', 
    	'Соколов И.С.', 
    	'Попов К.Р.'
    ]
},

 
У подальшому при перемиканні "сторінки» задається залежно від значень у серії:
 
var newCats = [];
for (var i = 0; i < series[this.index]['data'].length; i++) {
	newCats[i] = series[this.index]['data'][i]['name'];
};
this.chart.xAxis[0].setCategories(newCats);

 
Текст на кнопках легенди береться з імені серії, у всіх серій крім першої visible ставиться в false.
 
series: 
    [
        {
        name: '1',
        visible: true,

 
Ось так от, все виявилося дуже просто.
    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.