Использование диаграмм Plotly.js для информационных панелей
Сегодня мы рассмотрим действительно мощную библиотеку графиков, которую очень легко использовать и настраивать. Графическая библиотека Plotly с открытым исходным кодом поддерживает несколько языков программирования, включая Python, Matlab, R и, самое главное, Javascript!
Мне пришлось создать несколько информационных панелей для IoT-компаний, и диаграммы, безусловно, являются одним из самых больших элементов представления. Нужно ли говорить больше о важности диаграмм для отчетов, связанных с бизнесом, таких как продажи, мониторинг сети, акции и т. д.
Plotly предлагает множество видов диаграмм и карт, но наиболее распространенными из них являются:
- Линейные графики
- Гистограммы
- Ступенчатые диаграммы
Ниже я расскажу об основах использования plotly.js в реальном проекте.
Монтаж
Очень похоже на другие библиотеки диаграмм, вы можете получить их через пакеты CDN или npm. Более подробное руководство находится в их гитхаб-страница.
CDN
Вставьте скрипт в шапку index.html
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
НПМ
Чтобы установить с помощью npm, просто выполните
$ npm install plotly.js-dist
Обратите внимание, что это plotly.js-dist а не plotly.js
импорт
Теперь, чтобы импортировать его в свой проект, выполните
import Plotly from 'plotly.js-dist'
...
Plotly.newPlot('div-id', data, layout, options);
В html вам понадобится div с id вы хотите указать.
<div id="div-id"></div>
Действительно легкая вещь!
Построение базовой диаграммы
Теперь давайте сделаем базовую линейную диаграмму.
Базовая линейная диаграмма Codepen
JavaScript для этой небольшой диаграммы прост, мы хотим разбить некоторые важные флаги, которые вам нужны.
var trace1 = {
name: 'Energy consumption',
x: ['1-3-2019', '2-3-2019', '3-3-2019', '4-3-2019', '5-3-2019', '6-3-2019', '7-3-2019'],
y: [10, 15, 13, 17, 19, 10, 11, 13],
type: 'line',
line: {
color: '#45B5C6'
}
};
var trace2 = {
name: 'Cold water consumption',
x: ['1-3-2019', '2-3-2019', '3-3-2019', '4-3-2019', '5-3-2019', '6-3-2019', '7-3-2019'],
y: [16, 5, 11, 9, 0, 4, 0],
type: 'line'
};
var data = [trace1, trace2];
layout = {
showlegend: false
}
Plotly.newPlot('myDiv', data, layout, {
responsive: true,
displaylogo: false
});
след
Каждая серия на диаграмме называется трассировкой. ось x обычно это диапазон времени, а яксис это значение. Здесь я намеренно использую string для моего ось x потому что я хочу иметь возможность анализировать его в другом локализованном формате, например, 2 февраля 2019 г. в США и 2.2.2019 г. в Финляндии. Или даже по кварталам, например, Q1/2018.
@note: Plotly has locale config, but I wanted more control.
Если вы относитесь к каждому ось x пункт как категория, то все будет работать нормально. Если ось x представляет собой массив элементов `Date`, Plotly автоматически разберет его в график таймсерий.
Вы можете указать цвет линии каждой трассы. Если вы опустите его, Plotly предоставит цвет на основе индекса. Чтобы изменить цвет, добавьте запись
line: {
color: '#fff'
}
Заметь data требуется массив объектов. Это немного отличается от других библиотек диаграмм, таких как Google диаграммы или же Highcharts.
макет
Макет — это общие настройки Plotly. Здесь мы скрываем легенды, добавляя это в объект.
showlegend: false
Легенды позволяют показывать/скрывать каждую трассировку, что очень удобно, но я решил отключить эту функцию. В моем приложении у меня есть другие кнопки за пределами диаграммы, чтобы я мог управлять отображением и скрытием всех данных, поэтому мне не нужны легенды.
Другие конфигурации, которые я обычно использую для макета: font, autosize, marginчтобы диаграмма соответствовала вашему контейнеру.
конфигурация
Эти конфигурации являются дополнительными опциями для других функций диаграммы, таких как:
- Разрешение прокрутки и масштабирования
- Показать/скрыть панель модов
Полезные для меня
{
responsive: true,
displaylogo: false
}
Это должно быть довольно понятно — конфигурация позволяет диаграмме изменять ширину в соответствии с окном, а также удалять логотип Plotly с панели режимов.
Несколько осей
Теперь мы рассмотрим, как использовать разные типы диаграмм на одном графике.
Многолинейная диаграмма Codepen
var trace1 = {
name: "Energy consumption",
x: [
"1.3.2019 00:00",
"1.3.2019 03:00",
"1.3.2019 06:00",
"1.3.2019 09:00",
"1.3.2019 12:00",
"1.3.2019 15:00",
"1.3.2019 18:00",
"1.3.2019 21:00"
],
y: [20, 50, 92, 82, 14, 20, 50, 62],
text: ['20 kw/H', '50 kw/H', '92 kw/H', '82 kw/H', '14 kw/H', '20 kw/H', '50 kw/H', '62 kw/H'],
hoverinfo: 'x+text+name',
type: "bar",
marker: {
color: '#270657'
}
};
var trace2 = {
name: "Air pressure",
x: [
"1.3.2019 00:00",
"1.3.2019 03:00",
"1.3.2019 06:00",
"1.3.2019 09:00",
"1.3.2019 12:00",
"1.3.2019 15:00",
"1.3.2019 18:00",
"1.3.2019 21:00"
],
y: [81.32, 72.1, 121.41, 71.31, 40.98, 30.96, 51.2, 71.92],
text: ['81.32 Pa', '72.1 Pa', '121.41 Pa', '71.31 Pa', '40.98 Pa', '30.96 Pa', '51.2 Pa', '71.92 Pa'],
hoverinfo: 'x+text+name',
type: "line",
};
var trace3 = {
name: "Lights",
x: [
"1.3.2019 00:00",
"1.3.2019 03:00",
"1.3.2019 06:00",
"1.3.2019 09:00",
"1.3.2019 12:00",
"1.3.2019 15:00",
"1.3.2019 18:00",
"1.3.2019 21:00"
],
y: ["off", "on", "on", "on", "off", "off", "on", "on"],
type: "line",
line: {
shape: "hv",
color: '#45b5c6'
},
yaxis: "y2"
};
var data = [trace1, trace2, trace3];
layout = {
showlegend: false,
yaxis2: {
type: "category",
side: "right",
overlaying: "y"
}
};
Plotly.newPlot("myDiv", data, layout, {
responsive: true,
displaylogo: false
});
Типы диаграмм
Здесь у нас есть 3 основных типа диаграмм — линейные, ступенчатые и гистограммы. Вы можете настроить их для каждой трассы
type: "line"
...
type: "bar"
...
// step chart
type: "line",
line: {
shape: "hv",
},
также обратите внимание, что, установив второй яксис2мы можем установить вторую ось Y в правой части диаграммы для текстовых категорий.
{
...
text: ['81.32 Pa', '72.1 Pa', '121.41 Pa', '71.31 Pa', '40.98 Pa', '30.96 Pa', '51.2 Pa', '71.92 Pa'],
hoverinfo: 'x+text+name',
...
}
Пользовательский текст может использоваться для вставки единиц измерения значений. hoverinfo позволяет вам настроить то, что вы хотите показать, когда указатель мыши находится над значением. Если мы используем text вместо y тогда мы можем показать блок.
Собираем это вместе
Демонстрационная панель iot
Вот реальный пример панели управления IoT для отображения изменений значений данных датчика в реальном времени.
Надеюсь, с этим вы сможете легко использовать Plotly в своих будущих проектах.
Посмотреть больше примеров сюжета можно здесь, в ленте:
Другие библиотеки графиков
Также опубликовано в моем блоге jellenekhoh.io
