Мультисерийный кастомный график в модуле Charts
Мультисерийный график - это совокупность произвольного числа графиков нескольких различных величин.
Ключевым моментом мультисерийных графиков с точки зрения его конфигурации является опция (атрибут, настройка) config.series. Элементы внутри нее определяют количество выводимых графиков и их настройки.
|
1 |
config.series = [{КОНФИГ_ГРАФИКА_1},{КОНФИГ_ГРАФИКА_2},{КОНФИГ_ГРАФИКА_3}]; |
Можно вообще не указывать конфигурацию каждой серии, оставив только фигурные скобки, тогда графики будут выводиться с параметрами по умолчанию. Т.е. минимально необходимое содержание опции config.series (для трех графиков) будет выглядеть так.
|
1 |
config.series = [{},{},{}]; |
Если требуется выводить графики величин с разными единицами измерения и отображать в разных диапазонах, то определяется несколько осей ординат Y, а у каждой серии явным образом указывается, какую ось необходимо использовать при построении графика. Ниже пример опции config.series с указанием названий серий и привязки к осям ординат.
|
1 2 3 4 5 6 7 8 9 10 |
config.series = [{ name: 'Температура', yAxis: 0 },{ name: 'Влажность', yAxis: 1 },{ name: 'Давление', yAxis: 2 }]; |
При этом опция config.yAxis, разумеется, должна описывать все вышеобозначенные оси ординат в нужном количестве.
|
1 2 3 4 5 6 7 |
config.yAxis = [{ title: {text: 'Температура, С'} },{ title: {text: 'Влажность, %'} },{ title: {text: 'Давление, мм.рт.ст.'} }]; |
Таким образом, используя опции config.series и config.yAxis и настраивая их содержимое в соответствии с API Highcharts, можно получить мультисерийные графики с требуемым стилем и внешним видом. Демо можно посмотреть здесь.
Рассмотрим пару примеров.
Простой график температуры в разных помещениях
Мультисерийный график температуры
Все три величины одинаковые (температура в градусах цельсия), поэтому используется только одна ось Y.
На вкладке Данные добавляется три источника исторических данных.
Настройка набора данных
Опция config.series:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
config.series = [{ name: 'Комната', tooltip: { valueSuffix: ' °C', }, colors: '#2b908f', marker: { enabled: true, radius: 1, }, states: { hover: {lineWidth: 3} } },{ name: 'Ванная', tooltip: { valueSuffix: ' °C', }, colors: '#90ee7e', marker: { enabled: true, radius: 1, }, states: { hover: {lineWidth: 3} } },{ name: 'Кухня', tooltip: { valueSuffix: ' °C', }, colors: '#f45b5b', marker: { enabled: true, radius: 1, }, states: { hover: {lineWidth: 3} } }]; |
Опция config.yAxis:
|
1 2 3 4 5 6 |
config.yAxis = { title: {text: 'Температура, С'}, tickPixelInterval: 30, min: 15, max: 30 }; |
Описание остальных опций здесь не рассматриваем, т. к. они уже были описаны в предыдущих статьях. Полный код настройки графика можно скачать по ссылке.
Погодный (климатический) график температуры
Мультисерийный погодный график
Выводим три величины - температура воздуха, относительная влажность и атмосферное давление. Все величины имеют разные единицы измерения, поэтому используется три оси Y.
На вкладке Данные добавляется три источника исторических данных. Проставляем при необходимости приоритеты, если порядок осей и серий в конфиге не совпадает с порядком источников данных в таблице.
Настройка набора данных
Опция config.series:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
config.series = [{ name: 'Влажность', yAxis: 0, tooltip: { valueSuffix: ' %' }, marker: { enabled: true, radius: 1, }, states: { hover: {lineWidth: 3} } },{ name: 'Температура', yAxis: 1, tooltip: { valueSuffix: ' °C' }, marker: { enabled: true, radius: 1, }, states: { hover: {lineWidth: 3} } },{ name: 'Давление', yAxis: 2, tooltip: { valueSuffix: ' мм.рт.ст' }, marker: { enabled: true, radius: 1, }, states: { hover: {lineWidth: 3} } }]; |
Опция config.yAxis:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
config.yAxis = [{ title: { text: 'Влажность, %', style: { color: Highcharts.getOptions().colors[0] } }, labels: { style: { color: Highcharts.getOptions().colors[0] } }, min: 0, max: 100, tickPositions: [0, 20, 40, 60, 80, 100] },{ title: { text: 'Температура, °C', style: { color: Highcharts.getOptions().colors[1] } }, labels: { style: { color: Highcharts.getOptions().colors[1] } }, gridLineWidth: 0 },{ title: { text: 'Давление, мм.рт.ст.', style: { color: Highcharts.getOptions().colors[2] } }, labels: { style: { color: Highcharts.getOptions().colors[2] } }, gridLineWidth: 0, opposite: true }]; |
Полный код настройки графика можно скачать по ссылке.
Проявив творческий подход, можно привести этот график к такому виду.
График погоды