Как стать автором
Обновить

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

Время на прочтение1 мин
Количество просмотров6.4K

Недавно при создании страницы статистики на сайте, мне потребовалось в очередном графике вывести 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,


Вот так вот, все оказалось очень просто.
Теги:
Хабы:
Всего голосов 17: ↑9 и ↓8+1
Комментарии3

Публикации

Истории

Работа

Ближайшие события

19 августа – 20 октября
RuCode.Финал. Чемпионат по алгоритмическому программированию и ИИ
МоскваНижний НовгородЕкатеринбургСтавропольНовосибрискКалининградПермьВладивостокЧитаКраснорскТомскИжевскПетрозаводскКазаньКурскТюменьВолгоградУфаМурманскБишкекСочиУльяновскСаратовИркутскДолгопрудныйОнлайн
3 – 18 октября
Kokoc Hackathon 2024
Онлайн
24 – 25 октября
One Day Offer для AQA Engineer и Developers
Онлайн
25 октября
Конференция по росту продуктов EGC’24
МоскваОнлайн
7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн
7 – 8 ноября
Конференция «Матемаркетинг»
МоскваОнлайн
15 – 16 ноября
IT-конференция Merge Skolkovo
Москва
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань