Визуализация данных: исправляем недостатки библиотеки Highcharts.js

В недавних PHP-проектах мне довелось поработать с Highcharts.js — отличной библиотекой для создания красивых графиков на клиенте. Ко всем ее несомненным плюсам есть и пара досадных минусов: проблемы при отображения многострочных заголовков, описаний и подписей к графикам и отсутствие готового способа добавить свою информацию к скачиваемым графикам. О том, как с ними справиться — в сегодняшней статье.

Преимущества Highcharts.js

Начну с того, чем примечательна эта библиотека. Во-первых, ее очень легко использовать: подключаете файл Highcharts.js — и работаете. Во-вторых:

• гибкая настройка графиков и подписей к ним
• широкий выбор типов графиков
• возможность комбинировать различные виды графиков в одном макете
• корректное отображение графиков в различных браузерах, т. к. использует SVG
• возможность скачать график в PDF, PNG, JPG или SVG
• отличная документация и примеры

И многое другое! Более подробно вы можно ознакомится с возможностями библиотеки на сайте разработчика.

Недостатки Highcharts.js

Из минусов выделю следующие:

• Есть проблема с отображением многострочных заголовков и описаний графиков: подписи залезают на график.
• Длинные подписи к шкалам могут перекрывать друг друга.
• Нет стандартных решений добавления дополнительной информации к скачиваемым графикам. Поясню, что имею в виду: например, у вас есть график, но слева или справа от него вам нужно вывести некую текстовую информацию при скачивании графика. Сделать это можно только самому дописав код.

Решения

Говоря об этой библиотеке, думаю, не стоит вдаваться в примеры того, как с ней работать — все очень доступно описано в документации. Но стоит упомянуть о возможных решениях тех проблем, которые я описал в недостатках.

1. Многострочные заголовки и описания

Одно из решений, которое, пожалуй, самое простое и быстрое — делать отступы графика на величину, равную высоте заголовка плюс высота описания. Сделать отступ очень легко, написав следующее:

var title = ‘Длинное название графика’,
 titleFontSize = 12,//ставим на свое усмотрение
subtitle = ‘Длинное описание графика’, 
subtitleFontSize = 12,//ставим на свое усмотрение
		chart = new Highcharts.Chart({
chart: {
				//настройки графика
		},
		title: {
			text: title,
			style: {
				fontSize: titleFontSize  + 'px'
			},
		margin: setTitleMargin(title, 0, 45, titleFontSize) + setSubtitleMargin(subtitle, -50, subtitleFontSize)
		},         
		subtitle: {
			text: subtitle,
			style: {
				fontSize: subtitleFontSize  + 'px'
			},
			y: setTitleMargin(title, -10, titleFontSize)
		});
, где
/*
str – строка заголовка;
delta – дополнительный отступ между заголовком и материалом;
charNum – количество символов в строке;
fontSize – размер шрифта.
*/
function setTitleMargin(str, delta, charNum,  fontSize) {
	var size = fontSize || 20;
	return parseInt(str.length/ charNum, 10) * size + 20 + (delta ? delta : 0);
}

function setSubtitleMargin(str, delta, charNum,  fontSize) {
	if( str.length === 0 ) {
		return 0;
	}
	var size = fontSize || 16;
	return parseInt(str.length/ charNum, 10) * size + 16 + (delta ? delta : 0);
}

Что дает нам данный прием? Так мы указываем, что заголовок графика должен иметь отступ, равный количеству строк заголовка, умноженного на высоту строки заголовка, плюс количество строк описания, умноженное на высоту строки описания. Затем указываем, что отступ описания графика от верхней границы поля должен быть равен количеству строк описания, умноженному на высоту строки описания. Вот и вся магия.

2. Дополнительная информация к скачиваемым графикам

На просторах Интернета есть замечательный пример, как внести свои изменения в график при скачивании, с помощью сервера highcharts.com. Для этого используются функции Highcharts.getSVG и Highcharts.exportCharts.

Чтобы вывести дополнительный текст слева или справа от графиков, необходимо дописать функцию Highcharts.getSVG:

Highcharts.getSVG = function(charts) {
		var svgArr = [], top = 0, width = 0;
		var lines = '';
		$.each(charts, function(i, chart) {	
			chart.options.chart.backgroundColor = {
				linearGradient: [0, 0, 0, 300],
				stops: [
					[0, '#FFFFFF'],
					[1, '#E0E0E0']
				]
			};
				
			chart.options.chart.plotBackgroundColor = {
				linearGradient: [0, 0, 0, 300],
				stops: [
					[0, '#FFFFFF'],
					[1, '#E0E0E0']
				]
			};
		
			var svg = chart.getSVG();
			svg = svg.replace('

Все остальное, собственно, можно прочитать на сайте разработчика.

В заключение скажу, что работать с этой библиотекой было достаточно удобно и просто, поэтому, теперь когда возникнет необходимость нарисовать графики, первым делом я вспомню о Highcharts.js.