Создание интерактивных графиков с использованием Plotly.js, часть 3: Столбчатая диаграмма

В нашем последнем уроке вы узнали, как создавать линейные диаграммы в Plotly.js. Каждый аспект линейных диаграмм, таких как данные, которые должны быть нанесены, а также форма или цвет линии, соединяющей нанесенные точки, можно контролировать с помощью набора атрибутов. Plotly.js позволяет создавать диаграммы столбцов аналогичным образом.

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

Прежде чем двигаться дальше, я хотел бы упомянуть, что вы также можете создавать некоторые базовые диаграммы с использованием Chart.js. Если вы не планируете использовать какие-либо причудливые функции Plotly.js, использование более легкой библиотеки имеет больше смысла.

Создание вашей первой диаграммы

Вы можете построить гистограмму в Plotly.js, установив значение атрибута type в bar. Остальные задачи, такие как создание объекта трассировки или предоставление данных для построения, аналогичны процессу создания линейных диаграмм. Вот код, необходимый для создания базовой диаграммы в Plotly.

1

var barDiv = document.getElementById('bar-chart');

2

3

var traceA = {

4

  x: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],

5

  y: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],

6

  type: 'bar'

7

};

8

9

var data = [traceA];

10

11

var layout = {

12

  title:'Density of Planets (kg/m3)'

13

};

14

15

Plotly.plot( barDiv, data, layout );

Вот диаграмма, созданная вышеуказанным кодом. Данные плотности планеты взяты из Планетарного информационного бюллетеня, предоставленного NASA.

Создание сводных, сгруппированных и относительных графиков

Если вам нужно представить более сложные данные в форме диаграммы, вы можете использовать атрибут barmode, доступный в Plotly. Этот атрибут может быть установлен в stack, group, overlay, и relative. Это обычно полезно, если вы хотите построить многострочные трассы с соответствующей информацией.

Значение stack создает штабелированные гистограммы, в которых столбцы, представляющие подгруппы объекта, помещаются друг над другом друг на друга, чтобы сформировать один столбец. Все бары в подгруппе имеют разные цвета, которые показывают индивидуальный вклад этого раздела во все сущность. Объединенная длина штабелированных баров представляет собой общий размер этого объекта.

Вот некоторый код, который объединяет вклад в ВВП восьми стран. Данные по составу ВВП в номинальном ВВП были взяты из Википедии.

1

var barDiv = document.getElementById('bar-chart');

2

3

var primaryGDP = {

4

  x: ["United States", "China", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],

5

  y: [215364, 964772, 56764, 27959, 18549, 47277, 391672, 37050],

6

  type: 'bar',

7

  name: 'Agricultural Sector'

8

};

9

10

var secondaryGDP = {

11

  x: ["United States", "China", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],

12

  y: [3427876, 4464876, 1300833, 982067, 556477, 455355, 580755, 448305],

13

  type: 'bar',

14

  name: 'Industrial Sector'

15

};

16

17

var tertiaryGDP = {

18

  x: ["United States", "China", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],

19

  y: [14303756, 5788633, 3377434, 2484874, 2074864, 1985647, 1280813, 1367145],

20

  type: 'bar',

21

  name: 'Service Sector'

22

};

23

24

var data = [primaryGDP, secondaryGDP, tertiaryGDP];

25

26

var layout = {

27

  title:'Nominal GDP Sector Composition of Top 8 Countries',

28

  barmode: 'stack'

29

};

30

31

Plotly.plot( barDiv, data, layout );

Порядок укладки для подгрупп зависит от порядка, в котором данные были переданы функции.

Установка barmode на overlay помещает отдельные столбцы в подгруппы друг над другом. Хотя этот режим может быть полезен для прямых сравнений, вы должны быть осторожны с ним, потому что он будет скрывать более короткие бары, которые ранее были переданы в функции plot().

Следующая диаграмма была создана с установкой barmode в overlay. Теперь вы легко можете легко сравнить вклад ВВП в одном секторе во всех странах. Стоит отметить, что все бары одной страны теперь начинаются со дна. Это позволяет сделать несколько наблюдений очень легко. Например, сейчас очень ясно, что ВВП сектора услуг> ВВП промышленного сектора> ВВП сельскохозяйственного сектора во всех восьми странах.

В нынешнем масштабе невозможно должным образом оценить вклад сельскохозяйственного сектора в ВВП Германии, Великобритании и Франции. Способность Plotly.js увеличивать масштаб может оказаться очень полезной в таких случаях. Вы можете масштабировать столько, сколько хотите, и график все равно будет очень резким.

Вместо того, чтобы складывать все столбцы подгруппы друг на друга, вы также можете разместить их вместе, чтобы сформировать группу. Вам нужно будет установить barmode в group для создания сгруппированных диаграмм. Имейте в виду, что предоставление слишком большого количества информации в сгруппированных диаграммах может затруднить их чтение.

Вы можете управлять пространством между барами из разных категорий, а также барами в подгруппе, используя атрибуты «bargap» и «bargroupgap» соответственно. До этого момента все штрихи были вычерчены, чтобы отобразить фактические цифры ВВП. Однако вы можете использовать параметр barnorm для рисования баров в процентах или фракциях. Когда barnorm устанавливается на percentage или fraction, вычисляется общий вклад основной категории, а затем процент отчисляется на отдельные бары в зависимости от значения подгруппы.

Например, сектор услуг составляет около 79,7% от общего ВВП Соединенных Штатов. Это означает, что бар для сектора услуг в случае Соединенных Штатов будет составлен с отметкой 79,7. Все эти атрибуты, обсуждаемые в этом параграфе, указаны в объекте layout. Ниже приведен пример объекта макета, который задает все эти параметры.

1

var layout = {

2

  title:'Nominal GDP Sector Composition of Top 8 Countries',

3

  barmode: 'group',

4

  bargap: 0.25,

5

  bargroupgap: 0.1,

6

  barnorm: 'percent'

7

};

Конечное значение barmode равное relative, полезно, когда вы рисуете трасс с отрицательными и положительными значениями. В этом случае положительные значения вычерчиваются над осью, а отрицательные значения рисуются ниже оси.

Изменение цвета, ширины, текста и других атрибутов

Можно изменить цвет баров в трассировке, используя атрибут color, вложенный внутри параметра marker. color и width контура панели можно изменить аналогичным образом. Эти параметры вложены внутри атрибута line, который сам вложен внутри marker. Каждая из этих опций может быть предоставлена либо в виде единственного значения, чтобы указать цвет и ширину всех баров в трассе сразу или как массив, чтобы указать другой цвет или ширину для отдельных баров.

Другим важным атрибутом, который вы можете найти полезным, является base. Он позволяет указать позицию, в которой нарисована база бара. Это может быть полезно в определенных ситуациях, когда вы отправляете относительные значения, которые необходимо смещать, чтобы показать правильный результат.

Дополнительная информация может быть предоставлена о конкретном баре или построенной точке с использованием атрибута text. Позиция текста может быть указана с использованием inside, outside, auto, и none. Когда используется inside, текст будет располагаться внутри бара рядом с его концом. Сам текст можно масштабировать и поворачивать так, чтобы он правильно помещался внутри панели. Когда используется outside, текст будет помещен за пределы бара рядом с ним. В этом случае текст будет масштабироваться. Если для атрибута hovertext не было установлено значение, значение text также отображается внутри ярлыков наведения.

Вы также можете использовать разные семейства шрифтов для текста, лежащего внутри, а также вне бара, используя атрибуты insidetextfont и outsidetextfont.

Ниже приведен пример использования всех этих атрибутов для создания диаграммы, на которой показана относительная скорость различных транспортных средств с одним движущимся транспортным средством в качестве эталона.

1

var barDiv = document.getElementById('bar-chart');

2

var lightGreen = 'rgba(0,255,50,0.6)';

3

var redShade   = 'rgba(255,50,0,0.6)';

4

5

var traceA = {

6

  x: ["Car A", "Car B", "Car C", "Car D", "Car E", "Car F", "Car G", "Car H"],

7

  y: [100, 80, 40, 160, 75, 93, 8, 125],

8

  type: 'bar',

9

  text: ['','','','Overspeeding','','Overspeeding','','Overspeeding'],

10

  textposition: 'inside',

11

  width: 0.8,

12

  base: [-40, 10, 50, -45, 0, 15, 60, -20],

13

  marker: {

14

    color: [lightGreen, lightGreen, lightGreen, redShade, lightGreen, redShade, lightGreen, redShade],

15

    line: {

16

      color: 'black',

17

      width: 1

18

    }

19

  }

20

};

21

22

var data = [traceA];

23

24

var layout = {

25

  title:'Speed of Cars (km/hr)',

26

  yaxis: {

27

    dtick: 15

28

  }

29

};

30

31

Plotly.plot( barDiv, data, layout );

Как вы можете видеть, я передал base и color значения в виде массива. Когда транспортные средства идут в одном направлении, они, кажется, двигаются медленнее, поэтому нам нужно добавить скорость нашего собственного автомобиля в качестве базового значения, чтобы получить фактическую скорость.

Когда транспортные средства идут в противоположном направлении, они, кажется, движутся быстро, поэтому нам нужно вычесть скорость нашего собственного автомобиля, чтобы получить точный результат. Это позволяет нам показывать дополнительную информацию о скорости нашего собственного автомобиля на том же участке. Следующий пример CodePen показывает окончательную диаграмму, изображенную вышеуказанным кодом.

Заключение

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

Тем не менее, есть еще несколько дополнительных атрибутов, которые вы можете прочитать в разделе ссылки на трассировку штриховки на Plotly. Некоторые атрибуты, которые я объяснил в учебнике, отсутствуют в справочном разделе, но их можно найти в исходных файлах библиотеки, если вы заинтересованы в получении более подробных сведений о них.

Если у вас есть какие-либо вопросы или предложения, связанные с этим учебником, не стесняйтесь, дайте мне знать в комментариях.