Автор оригинала: Jellene Khoh.
Сегодня мы собираемся посмотреть на действительно мощную библиотеку Charting, которая действительно проста в использовании и настройке. Сюжено Открытая фабрикальная библиотека Поддерживает несколько языков программирования, включая Python, MatLab, R и самое главное JavaScript!
Я должен был построить несколько панелей для компаний IoT, и графики определенно являются одним из самых больших элементов в виду. Нужно больше говорить о значении графиков для бизнеса, связанные с отчетом, такими как продажи, мониторинг сети, акции и т. Д.
Правильно предлагает многие виды графиков и карт, но наиболее распространенные, которые я использую:
- Линейные диаграммы
- Гистограммы
- Шагные диаграммы
Ниже я буду проходить по основаниям на том, как я использую Plotly.js в реальном проекте.
Монтаж
Очень похоже на другие библиотеки графиков, вы можете получить их через пакеты CDN или NPM. Более подробное руководство в их Страница GitHub Отказ
CDN
Вставьте скрипт в голову index.html.
NPM
Чтобы установить с NPM просто сделать
$ npm install plotly.js-dist
Обратите внимание, что это Plotly.js-dist И не такly.js.
Импортировать
Теперь импортировать его в свой проект
import Plotly from 'plotly.js-dist'
...
Plotly.newPlot('div-id', data, layout, options);
В HTML вам понадобится div с ID Вы хотите указать.
Действительно легко!
Построение базовой диаграммы
Теперь позвольте сделать базовую линейную диаграмму.
Кодепена базовая линия диаграммы
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
});
след
Каждая серия на графике называется следом. xaxis как правило, временной диапазон, а yaxis это значение. Здесь я нарочно использую строка Для моего xaxis Потому что я хочу иметь возможность разбирать его в разных локализованных формате, например 2 февраля 2019 года в США, против 2.2.2019 в Финляндии. Или даже на четверти, например Q1/2018.
@note: Plotly has locale config, but I wanted more control.
Если вы относитесь к каждому xaxis предмет как категория Тогда все будет работать нормально. Если xaxis Является ли массив предметов «Дата», сюжетно будет автоматически разобрать его в Таблица временем.
Вы можете указать цвет линии каждого трассы. Если вы оставите его, сюжета будет обеспечивать цвет на основе индекса. Чтобы изменить цвет, добавьте запись
line: {
color: '#fff'
}
Обратите внимание, что данные требует массива объекта. Это немного отличается от других библиотек Charting, таких как Google Charts или HighCharts Отказ
макет
Макет – это общие настройки для зарубежных. Здесь мы скрываем легенды, добавив это в объект.
showlegend: false
Легенды позволяют вам показать/скрыть каждый след, что довольно удобно, но я решил выключить его. В моем приложении у меня есть другие кнопки за пределами таблицы для меня, чтобы контролировать отображение и скрывать каждые данные, поэтому мне не нужны легенды.
Другие конфигурации, которые я обычно использую для макета, являются шрифт , Autosize , маржа , чтобы сделать график соответствовать вашим контейнере.
Полная документация здесь: https://plot.ly/javascript/reference/#layout.
конфигурация
Эти конфигурации являются дополнительными вариантами для других функций вокруг графика, например:
- Позволяя прокрутить и увеличить
- MODEBAR SHOW/Скрыть
Полезные для меня
{
responsive: true,
displaylogo: false
}
Это должно быть довольно самоуверенно – конфигурация позволяет диаграммы изменять ширину в соответствии с окном, а также удалить логотип Pertly с MODEBAR.
Полная документация здесь: https://plot.ly/javascript/configuration-options/
Несколько осей
Теперь мы исследуем, как использовать различные типы диаграмм на одном графике.
Кодепен многоуровневый график
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",
},
также обратите внимание, что, установив второй yaxis2 , мы можем установить вторую яси в правой части графика для текстовых категорий.
{
...
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 Позволяет настроить то, что вы хотите показать, когда мышь наберет по значению. Если мы используем текст вместо y Тогда у нас может быть показано устройство.
Положить его вместе
Demo IoT Dashboard
Вот настоящий образ жизни приборной панели IOT для отображения изменений значения данных живого датчика.
Надеюсь, с этим вы можете с легкостью использовать загарно в ваших будущих проектах.
Посмотрите больше примеров сюжета здесь в корте: https://plot.ly/feed/#/
Другие библиотеки графиков
Также опубликован в моем блоге jellenekhoh.io