Цветовая индикация диапазонов на графике в модуле Charts
С помощью опции Highcharts Setup можно реализовать цветовую индикацию выхода величины за указанные пределы.
Для примера график напряжения сети будет выглядеть так.
График напряжения сети
А это аналогичный график для потребляемой мощности.
График потребляемой мощности
Для начала определяем базовые настройки графика.
Формируем секцию конфига и опций графика, внутри которой будет размещаться остальной код.
|
1 2 3 |
function (config, options) { // область для кода } |
Спрячем ссылку на сайт Highcharts.
|
1 |
config.credits = {enabled: false}; |
Убираем легенду.
|
1 |
config.legend= {enabled: false}; |
Локализуем график.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
options.lang = { loading: 'Загрузка...', months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'], weekdays: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'], shortMonths: ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек'], exportButtonTitle: "Экспорт", printButtonTitle: "Печать", rangeSelectorFrom: "С", rangeSelectorTo: "По", rangeSelectorZoom: "Период", downloadPNG: 'Скачать PNG', downloadJPEG: 'Скачать JPEG', downloadPDF: 'Скачать PDF', downloadSVG: 'Скачать SVG', printChart: 'Напечатать график', resetZoom: 'Сбросить зум', resetZoomTitle: 'Сбросить зум', thousandsSep: " ", decimalPoint: '.' }; |
Укажем заголовок, сменим его цвет и размер шрифта.
|
1 2 3 4 5 6 7 |
config.title = { text: 'Напряжение сети, В', style: { color: '#FFF', font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif' } }; |
Немного настроим ось X - размер подписей, их формат, а также засечки передвинем внутрь области графика и определим их размер.
|
1 2 3 4 5 6 7 8 9 |
config.xAxis = { type: 'datetime', tickPosition: 'inside', tickLength: 5, labels: { overflow: 'justify', style: {fontSize: '11px'} } }; |
У оси Y уберем подпись с названием, зададим шаг горизонтальной сетки в пикселях и определим границы - минимальное и максимальное значения графика.
|
1 2 3 4 5 6 |
config.yAxis = { title: null, tickPixelInterval: 12, max: 250, min: 200, }; |
В завершении прописываем настройки серий, ключевым моментом в которых является опция zones. Именно она определяет, какой диапазон значений каким цветом будет отрисован. Порядок указания зон - от меньшего значения к большему.
|
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 |
config.series = [{ name: 'Напряжение', tooltip: { valueSuffix: ' В', }, marker: { enabled: false, radius: 1, }, states: { hover: {lineWidth: 2} }, zones: [{ value: 221, color: 'red' }, { value: 224, color: 'yellow' }, { value: 236, color: 'green' }, { value: 239, color: 'yellow' }, { color: 'red' }] }]; |
В качестве примера для графика сетевого напряжения определим 5 зон:
- меньше 221 В - красная;
- от 221 В до 224 В - желтая;
- от 224 В до 236 В - зеленая;
- от 236 В до 239 В - желтая;
- выше 239 В - красная.
Полный код настройки графика через опцию Highcharts Setup будет выглядеть так.
|
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
function (config, options) { config.credits = {enabled: false}; config.legend= {enabled: false}; config.yAxis = { title: null, tickPixelInterval: 12, max: 250, min: 200, }; config.xAxis = { type: 'datetime', tickPosition: 'inside', tickLength: 5, labels: { overflow: 'justify', style: {fontSize: '11px'} } }; config.title = { text: 'Напряжение сети, В', style: { color: '#FFF', font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif' } }; config.series = [{ name: 'Напряжение', tooltip: { valueSuffix: ' В', }, marker: { enabled: false, radius: 1, }, states: { hover: {lineWidth: 2} }, zones: [{ value: 221, color: 'red' }, { value: 224, color: 'yellow' }, { value: 236, color: 'green' }, { value: 239, color: 'yellow' }, { color: 'red' }] }]; options.lang = { loading: 'Загрузка...', months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'], weekdays: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'], shortMonths: ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек'], exportButtonTitle: "Экспорт", printButtonTitle: "Печать", rangeSelectorFrom: "С", rangeSelectorTo: "По", rangeSelectorZoom: "Период", downloadPNG: 'Скачать PNG', downloadJPEG: 'Скачать JPEG', downloadPDF: 'Скачать PDF', downloadSVG: 'Скачать SVG', printChart: 'Напечатать график', resetZoom: 'Сбросить зум', resetZoomTitle: 'Сбросить зум', thousandsSep: " ", decimalPoint: '.' }; } |