skysilver

<<< Назад

График с цветовой индикацией выхода величины за пределы

Кастомный график напряжения сети с помощью модуля Charts.

В продолжение статьи о кастомных графиках в модуле Charts предлагаю вариант графика с цветовой индикацией выхода величины за указанные пределы.

Для примера график напряжения сети будет выглядеть так.
hc1

А это аналогичный график для потребляемой мощности.
hc2

Для реализации используется опция Highcharts Setup на вкладке Общее графика в модуле Charts.

Для начала накидываем базовые настройки графика.

Формируем секцию конфига и опций графика, внутри которой будет размещаться остальной код.

function (config, options) {
    // область для кода
}

Спрячем ссылку на сайт Highcharts.

config.credits = {enabled: false};

Убираем легенду.

config.legend= {enabled: false};

Локализуем график.

 options.lang = {
        loading: 'Загрузка...',
        months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
        weekdays: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
        shortMonths: ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек'],
        exportButtonTitle: "Экспорт",
        printButtonTitle: "Печать",
        rangeSelectorFrom: "С",
        rangeSelectorTo: "По",
        rangeSelectorZoom: "Период",
        downloadPNG: 'Скачать PNG',
        downloadJPEG: 'Скачать JPEG',
        downloadPDF: 'Скачать PDF',
        downloadSVG: 'Скачать SVG',
        printChart: 'Напечатать график',
        resetZoom: 'Сбросить зум',
        resetZoomTitle: 'Сбросить зум',
        thousandsSep: " ",
        decimalPoint: '.'
 };

Укажем заголовок, сменим его цвет и размер шрифта.

config.title = {
   text: 'Напряжение сети, В',
   style: {
      color: '#FFF',
      font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
   }
};

Немного настроим ось X - размер подписей, их формат, а также засечки передвинем внутрь области графика и определим их размер.

config.xAxis = {
   type: 'datetime',
   tickPosition: 'inside',
   tickLength: 5,
   labels: {
      overflow: 'justify',
      style: {fontSize: '11px'}
   }
};

У оси Y уберем подпись с названием, зададим шаг горизонтальной сетки в пикселях и определим границы - минимальное и максимальное значения графика.

config.yAxis = {
   title: null,
   tickPixelInterval: 12,
   max: 250,
   min: 200,
};

В завершении прописываем настройки серий, ключевым моментом в которых является опция zones. Именно она определяет, какой диапазон значений каким цветом будет отрисован. Порядок указания зон - от меньшего значения к большему.

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 зон:

  1. меньше 221 В - красная;
  2. от 221 В до 224 В - желтая;
  3. от 224 В до 236 В - зеленая;
  4. от 236 В до 239 В - желтая;
  5. выше 239 В - красная.

Полный код настройки графика через опцию Highcharts Setup будет выглядеть так.

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: '.'
   };
}

Обсуждение (2) (26)

Смотрите так же:
12.07.2019 MajorDoMo и Яндекс Алиса. Алиса, включи канал Карусель.
20.06.2019 MajorDoMo и Яндекс Алиса. Алиса, измени цвет бра на красный.
18.06.2019 MajorDoMo и Яндекс Алиса. Алиса, сделай ярче настольную лампу.
17.06.2019 MajorDoMo и Яндекс Алиса. Алиса, включи свет на кухне.
10.06.2019 MajorDoMo и Яндекс Алиса. Модуль Yandex Home.
06.06.2019 MajorDoMo и Яндекс Алиса. Объединение аккаунтов.
05.06.2019 MajorDoMo и Яндекс Алиса. Регистрация приватного навыка.
03.06.2019 Загрузка PHP-расширения PDO MySQL в Windows
01.06.2019 MajorDoMo и Яндекс Алиса. Публикация вебхуков.
29.05.2019 MajorDoMo и Яндекс Алиса. Общие сведения.
22.05.2019 Экспресс контроль состояния циклов в Linux
08.05.2019 Сценарий контроля состояния SSL сертификатов сайтов
26.02.2019 Экспорт графиков в PNG-файл в модуле Charts
26.01.2019 Мультисерийный кастомный график в модуле Charts
30.12.2018 Личные итоги 2018 года
12.11.2018 Кастомный график в модуле Charts
15.08.2018 Кронштейн NB F120 (North Bayou)
18.07.2018 WiFi-информер на светодиодных матрицах MAX7219 и ESP8266. Часть 3.
20.06.2018 WiFi-информер на светодиодных матрицах MAX7219 и ESP8266. Часть 2.
15.06.2018 WiFi-информер на светодиодных матрицах MAX7219 и ESP8266. Часть 1.
20.05.2018 Кросс-компиляция ядра для Banana Pi M2U
14.05.2018 Ссылки на ресурсы по MajorDoMo
02.03.2018 Знакомство и тестирование Banana Pi M2U
21.02.2018 Распаковка Banana Pi M2U
14.02.2018 Одноплатный ПК для MajorDoMo
14.08.2018 Заметки по железу
23.01.2018 Мой взгляд на вопрос голосового управления в MajorDoMo
17.01.2018 Обзор цен на устройства Xiaomi
24.12.2017 Гирлянда на ESP8266 и WS2812
20.12.2017 Блог им. skysilver

Киров, Россия

На форуме: skysilver

Веб-сайт:
http://connect.smartliving.ru/profile/461