Введение в plotly.js — графическую библиотеку с открытым исходным кодом

Plotly.js — это библиотека, подходящая для приложений JavaScript, использующих графики и диаграммы. Есть несколько причин использовать его в своем следующем проекте:

Plotly.js использует как D3.js, так и stack.gl.
Plotly.js поставляется с 20 типами диаграмм, включая трехмерные диаграммы, статистические графики и карты SVG.
Это библиотека с открытым исходным кодом

У него более 9900 звезд на Github.

В Plotly есть две основные концепции:
1. Данные
2. Макет

Данные

Объект Data определяет, что мы хотим отобразить на диаграмме (то есть данные). Мы определяем набор данных и спецификации для их отображения в виде трассировки. Объект Data может иметь много следов. Подумайте о линейной диаграмме с двумя линиями, представляющими две разные категории: каждая линия представляет собой кривую.

Макет

Объект Layout определяет функции, не связанные с данными (такие как заголовок, заголовки осей и т. д.). Мы также можем использовать макет для добавления аннотаций и фигур на диаграмму.

Давайте рассмотрим настройку:

Сначала подключите файл из CDN

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

Далее построим линейный график:

HTML:

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv">
	<!-- Plotly chart will be drawn inside this DIV -->
  </div>

</body>

JS :

var trace1 = {
  x: [11, 12, 13, 14],
  y: [19, 14, 12, 16],
  type: 'scatter',
};

var trace2 = {
  x: [12, 22, 23, 24],
  y: [15, 4, 10, 8],
  type: 'scatter'
};

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data);

Результат:

Базовую настройку можно выполнить с помощью включения файла, элемента DOM и скрипта для построения графика.
После включения библиотеки Plotly.js в , мы определили пустой ‹div› для построения графика.
Plotly.new() рисует новый график в элементе.
У нас могут быть линейные и точечные диаграммы путем включения mode в переменную трассировки.
Легенда на графике связана с данными, графически отображаемыми в области графика. диаграммы.
Мы можем настроить диаграммы, используя различные параметры, такие как имя легенды, цвет маркера, размер маркера, цвет линии, ширина линии, заголовок диаграммы, режим и т. д.

Пример:

HTML:

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv">
	<!-- Plotly chart will be drawn inside this DIV -->
  </div>
  
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>

</body>

JS :

var trace1 = {
  x: [11, 12, 13, 14],
  y: [11, 14, 12, 16],
  mode: 'markers',
  name : "Apple",
  marker: {
    color: 'rgb(219, 64, 82)',
    size: 13
  }
};

var trace2 = {
  x: [12, 13, 14, 15],
  y: [17, 15, 10, 19],
  mode: 'lines',
  name : "Mangoes",
  line: {
    color: 'rgb(55, 128, 191)',
    width: 6
  }
};

var trace3 = {
  x: [11, 21, 31, 41],
  y: [14, 19, 16, 13],
  mode: 'lines+markers',
  name : "grapes",
  marker: {
    color: 'rgb(128, 0, 128)',
    size: 9
  },
  line: {
    color: 'rgb(128, 0, 128)',
    width: 2
  }
};

var data = [trace1, trace2, trace3];

var layout = {
  title: 'Line and Scatter Styling Example'
};

Plotly.newPlot('myDiv', data, layout);

Результат:

Если мы используем маркеры, как мы использовали в trace1 , обратите внимание, что мы получаем только точки, отмеченные в координатах графика, и не видим соединенную линию через все точки.

К настоящему моменту мы рассмотрели несколько примеров линий, давайте быстро построим столбчатую диаграмму, используя «bar» в качестве типа.

Пример:

HTML:

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

JS :

var data = [{
  x: ['lions', 'tigers','monkeys'],
  y: [21, 15, 24],
  type: 'bar'
}];

Plotly.newPlot('myDiv', data);

Результат:

Вы нашли эту статью полезной? Я стараюсь изо всех сил, чтобы написать глубокую статью погружения.

У меня был довольно хороший опыт работы с Plotly. Что вы думаете об этом после этого обзора? А какие еще инструменты вы используете для создания диаграмм для Интернета? Поделитесь ими в комментариях!

Я надеюсь, что вы нашли это полезным. Если это так, не забудьте оставить много хлопков! 👏 (Вы можете оставить до 50 😉) и поделитесь этой записью в блоге. Спасибо, что прочитали!

Загляните в мой блог, чтобы прочитать больше интересных статей: https://prasadseth6.wordpress.com

Введение в plotly.js — графическую библиотеку с открытым исходным кодом

Вопросы по теме