skysilver

<<< Назад

Кастомный график в модуле Charts

Делаем кастомный график уличной температуры с помощью модуля Charts, используя магию html-верстки.

Штатные возможности модуля Charts не позволяют широко кастомизировать внешний вид графиков. Имеющаяся в модуле опция настройки на вкладке Данные распространяется только на ось Y графика, чего зачастую бывает недостаточно. Чтобы обойти данную несправедливость можно самостоятельно с нуля накодить вывод графика в HTML-элементах Меню или Сцен, использую API Highcharts в полном объеме. Либо воспользоваться моим вариантом обхода ограничений модуля, который становится возможным благодаря небольшим манипуляциям с html-версткой в модуле.

Внимание! Данное решение не работает на новой версии модуля от 13.11.2018 г. Используйте новую опцию Highcharts Setup (см. дополнение в конце статьи).

Собственно все действия проводятся в опции Настроить вкладки Данные.

Если в это поле настроек ввести следующий код

}], // Начинаем всегда с этой строки.

// Здесь будет находиться JSON графика.

// Завершаем обязательно такими строками.
});
});

// Здесь можно добавить локализацию графика.

</script><script>/* <!--

то он разорвет сущесутвующую верстку и даст нам возможность сформировать и вписать нашу собственную JSON-структуру графика.

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

Что же можем теперь сделать с графиком? Вообщем-то, почти все, что есть в API Highcharts. Читаем api docs, смотрим демки, проникаемся и кодим.

Для начала сменим цвет и размер заголовка:

title: {
   text: 'Температура на улице',
   style: {
      color: '#FFF',
      font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
   }
},

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

xAxis: {
   type: 'datetime',
   tickPosition: 'inside',
   labels: {
      overflow: 'justify',
      rotation: -45,
      style: {fontSize: '11px'}
   },
   dateTimeLabelFormats: {day: '%e %b'}
},

Ось Y в данной случае не так интересна, поэтому уберем только подпись с названием оси.

yAxis: {
   title: null
},

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

credits: {
   enabled: false
},

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

legend: {enabled: false},

Обязательно (!) прописываем настройки серий. В данном примере серия только одна - температура (мультисерийные графики я не тестировал). Указываем название, единицу измерения, отключаем отображение маркеров на линии графика, выключаем эффект утолшения линии при наведении указателя, выставляем цвет графика для положительных и отрицательных значений.

series: [{
   name: 'Температура',
   tooltip: {
      valueSuffix: ' °C',
   },
   marker: {
      enabled: true,
      radius: 1,
   },
   states: {
      hover: {lineWidth: 2}
   },
   color: '#FF3333',
   negativeColor: '#48AFE8',
   data: []
}]

Напоследок локализуем график.

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

Сохраняем. Открываем график и смотрим результат.

Так выглядит стандартный график уличной температуры за 4 дня.

hc1
А так - тот же самый график, но уже после кастомизации.

hc2

Ниже привожу полный код настройки графика.

}], // Начинаем всегда с этой строки.

// Здесь будет находиться JSON графика.
title: {
   text: 'Температура на улице',
   style: {
      color: '#FFF',
      font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
   }
},
xAxis: {
   type: 'datetime',
   tickPosition: 'inside',
   labels: {
      overflow: 'justify',
      rotation: -45,
      style: {fontSize: '11px'}
   },
   dateTimeLabelFormats: {day: '%e %b'}
},
yAxis: {
   title: null
},
credits: {
   enabled: false
},
legend: {enabled: false},
series: [{
   name: 'Температура',
   tooltip: {
      valueSuffix: ' °C',
   },
   marker: {
      enabled: true,
      radius: 1,
   },
   states: {
      hover: {lineWidth: 2}
   },
   color: '#FF3333',
   negativeColor: '#48AFE8',
   data: []
}]

// Завершаем обязательно такими строками.
});
});

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

</script><script>/* <!--

Важно!

В связи с неожиданным (внеплановым) обновлением модуля от 13 ноября 2018 г. все вышеуказанные манипуляции можно и нужно делать через штатную возможность модуля - настройка Highcharts Setup на вкладке Общее. При этом несколько изменится синтаксис конфига, но общие принципы кастомизации останутся точно такие же.

hc3

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

function (config, options) {
config.credits = {enabled: false};
config.legend= {enabled: false};
config.yAxis = {title: null};
config.xAxis = {
   type: 'datetime',
   tickPosition: 'inside',
   labels: {
      overflow: 'justify',
      rotation: -45,
      style: {fontSize: '11px'}
   },
   dateTimeLabelFormats: {day: '%e %b'}
};
config.title = {
   text: 'Температура на улице',
   style: {
      color: '#FFF',
      font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
   }
};
config.series = [{
   name: 'Температура',
   tooltip: {
      valueSuffix: ' °C',
   },
   marker: {
      enabled: true,
      radius: 1,
   },
   states: {
      hover: {lineWidth: 2}
   },
   color: '#FF3333',
   negativeColor: '#48AFE8',
   data: []
}];
options.lang = {
      loading: 'Загрузка...',
      months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
      weekdays: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
      shortMonths: ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек'],
      exportButtonTitle: "Экспорт",
      printButtonTitle: "Печать",
      rangeSelectorFrom: "С",
      rangeSelectorTo: "По",
      rangeSelectorZoom: "Период",
      downloadPNG: 'Скачать PNG',
      downloadJPEG: 'Скачать JPEG',
      downloadPDF: 'Скачать PDF',
      downloadSVG: 'Скачать SVG',
      printChart: 'Напечатать график',
      resetZoom: 'Сбросить зум',
      resetZoomTitle: 'Сбросить зум',
      thousandsSep: " ",
      decimalPoint: '.'
   }
}

Обсуждение (7) (24)

Смотрите так же:
13.12.2018 График с цветовой индикацией выхода величины за пределы
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