Что такое Плотли? 🤔
Для разработчика этот случай произойдет, когда ему или ей необходимо создать графики из различных типов данных и графиков, которые имеют смысл и понятны пользователю, поэтому, как разработчик, я ищу множество библиотек для создания графиков, но, в конце концов, одну библиотеку, которую я считаю разумной и Понятно, что это Plotly, поэтому, прежде чем углубляться в Plotly — графическую библиотеку, давайте посмотрим, что такое графическая библиотека.
Графическая библиотека — это библиотека, которая используется для создания красивых графиков с использованием данных. Графики похожи на гистограммы, круговые диаграммы, линейные диаграммы и т. д. Представление данных в графическом виде более читабельно и понятно для не кодеров или обычных пользователей, а не для отображения в виде текстовой информации. Отображение информации в графическом виде намного полезнее для пользователя.
Теперь Plotly — это графическая библиотека, предоставленная командой Plotly, которая доступна на 7 различных языках программирования: Python, R, JavaScript, Julia, F#, ggplot2, MATLAB. с этим типом графической библиотеки мы можем создавать много мощных графиков. Построенный на основе d3.js и stack.gl, plotly.js представляет собой высокоуровневую декларативную библиотеку построения диаграмм. plotly.js поставляется с более чем 40 типами диаграмм, включая научные диаграммы, трехмерные графики, статистические диаграммы, карты SVG, финансовые диаграммы и многое другое.
Примечание. Все созданные графики построены на основе SVG, а не Canvas только для HTML.
Почему мы используем Plotly вместо других графических библиотек? 👇
Plotly поддерживает более одного языка для создания красивых графиков, что делает его особенным, чем другие графические библиотеки.
Синтаксис и семантика Plotly намного проще, чем в других библиотеках JavaScript, таких как D3.js, которые имеют очень сложный синтаксис для понимания начинающим программистом.
Настройка ✏️ очень важна, когда вы создаете что-то графическое, поэтому в Plotly настройка очень проста, и Plotly предоставляет множество функций.
Давайте установим и попробуем настроить приложение Plotly in React.
Установка пакетов NPM для Plotly ⚙️🔍
npm установить react-plotly.js plotly.js
Пример кода для настройки plotly.js в компоненте
import React from 'react';
import Plot from 'react-plotly.js';
class App extends React.Component {
render() {
return (
<Plot
data={[
{
x: [1, 2, 3],
y: [2, 6, 3],
type: 'scatter',
mode: 'lines+markers',
marker: {color: 'red'},
},
{type: 'bar', x: [1, 2, 3], y: [2, 5, 3]},
]}
layout={ {width: 320, height: 240, title: 'A Fancy Plot'} }
/>
);
}
}
ВЫХОД 😲🕺
Есть более мощные функции Plotly.js
Вывод: доступно много библиотек, это зависит от требований, но я рекомендую вам использовать plotly.js, который поможет вам очень легко создавать графики.
Полезные ссылки
