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

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

Если вы начали эту серию с самого начала, вы могли заметить, что Plotly.js использует тот же тип scatter для создания как линейных, так и пузырьковых диаграмм. Единственное отличие состоит в том, что мы должны были установить mode на lines при создании линейных диаграмм и markers при создании пузырьковых.

Точно так же Plotly.js позволяет создавать диаграммы pie, donut и gauge с использованием того же значения для атрибута type и изменения значения других атрибутов в зависимости от диаграммы, которую вы хотите создать.

Создание диаграмм пирога в Plotly.js

Вы можете создать круговые диаграммы в Plotly.js, установив атрибут type в pie. Существуют и другие атрибуты, такие как opacity, visible и name, которые являются общими для других типов диаграмм. Атрибут name используется для предоставления имени текущей трассировки. Это имя показано в легенде для идентификации. Вы можете показать или скрыть трассировку пирога в легенде диаграммы, установив для атрибута showlegend значение true или false соответственно. Вы можете установить имя метки для разных секторов круговой диаграммы, используя атрибут labels.

В случае круговых диаграмм объект-маркер используется для управления появлением разных секторов диаграммы. Атрибут color, вложенный внутри marker, можно использовать для установки цвета каждого сектора круговой диаграммы. Цвет для разных секторов может быть указан как значение массива для атрибута color.

Вы также можете установить цвет и ширину всех строк, охватывающих каждый сектор, используя атрибуты color и width, вложенные внутри объекта линии. У вас также есть возможность сортировать все сектора круговой диаграммы от самых больших до самых маленьких, используя булевский атрибут sort. Аналогично, направление секторов может быть изменено в clockwise или counterclockwise с помощью атрибута direction.

Следующий код создает базовую круговую диаграмму, в которой показана лесная область пяти ведущих стран мира.

var pieDiv = document.getElementById("pie-chart");

var traceA = {
  type: "pie",
  values: [8149300, 4916438, 4776980, 3100950, 2083210],
  labels: ['Russia', 'Canada', 'Brazil', 'United States', 'China']
};

var data = [traceA];

var layout = {
  title: "Area Under Forest for Different Countries"
};

Plotly.plot(pieDiv, data, layout);

Как вы можете видеть, мы больше не используем атрибуты x и y для указания точек, которые мы хотим построить. Это делается с помощью values и labels. Проценты определяются автоматически на основе входных значений.

Please accept marketing cookies to load this content.

По умолчанию первый кусочек пирога начинается в 12 часов. Вы можете изменить начальный угол диаграммы, используя атрибут rotation, который принимает значение от -360 до 360. Значение по умолчанию 12 часов равно углу 0.

Если вы хотите, чтобы фрагмент в вашей диаграмме выделялся, вы можете использовать атрибут pull, который может принимать либо число, либо массив чисел со значениями от 0 до 1. Атрибут pull используется для вытягивания указанных секторов из пирога. Расстояние вытяжки равно доле большего радиуса пирога или пончика.

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

Вы можете контролировать цвет отдельных секторов в круговой диаграмме, используя атрибут colors, вложенный внутри объекта маркера. Ширина и цвет линии, которая охватывает каждый сектор, также могут быть изменены с помощью атрибутов width и color, вложенных внутри объекта линии. Ширина по умолчанию закрывающей строки равна 0. Это означает, что по умолчанию по секторам не будет рисоваться линия.

Существует также атрибут hovertext, который может использоваться для предоставления некоторой дополнительной текстовой информации для каждого отдельного сектора. Эта информация будет видна для зрителей, когда они нависают над сектором. Одним из условий появления текста является то, что атрибут hoverinfo должен содержать флаг text. Вы можете установить цвет текста, лежащий внутри или вне секторов пирога, используя атрибуты family, size и color, вложенные внутри объектов insidetextfont и outsidetextfont соответственно.

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

var pieDiv = document.getElementById("pie-chart");

var traceA = {
  type: "pie",
  values: [8149300, 4916438, 4776980, 3100950, 2083210],
  labels: ['Russia', 'Canada', 'Brazil', 'United States', 'China'],
  hole: 0.25,
  pull: [0.1, 0, 0, 0, 0],
  direction: 'clockwise',
  marker: {
    colors: ['#CDDC39', '#673AB7', '#F44336', '#00BCD4', '#607D8B'],
    line: {
      color: 'black',
      width: 3
    }
  },
  textfont: {
    family: 'Lato',
    color: 'white',
    size: 18
  },
  hoverlabel: {
    bgcolor: 'black',
    bordercolor: 'black',
    font: {
      family: 'Lato',
      color: 'white',
      size: 18
    }
  }
};

var data = [traceA];

var layout = {
  title: "Area Under Forest for Different Countries"
};

Plotly.plot(pieDiv, data, layout);

Please accept marketing cookies to load this content.

Создание калибровочных диаграмм в Plotly.js

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

Во-первых, нам нужно выбрать некоторые значения для атрибута values. Чтобы все было просто, я буду использовать верхнюю половину пирога в качестве моей калибровочной диаграммы. Это означает, что значения должны быть разделены поровну между частью, которую я хочу видеть, и частью круговой диаграммы, которую я хочу скрыть. Видимый участок диаграммы можно разделить на более мелкие части. Ниже приведен пример выбора значений для нашей калибровочной диаграммы.

1	values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100]

Число 100 в указанной строке - произвольное. Как вы можете видеть, первые пять срезов вместе составляют до 100, что также является значением, установленным для скрытой области круговой диаграммы. Это разделяет весь пирог в равной степени между скрытой и видимой частью.

Вот полный код, который создает нашу базовую калибровочную диаграмму. Следует отметить, что я установил атрибут цвета сектора, который должен быть скрыт до белого. Аналогично, значения text и labels для соответствующего сектора также были установлены на пустые строки. Атрибут rotation был установлен на 90, так что диаграмма не выводится из позиции по умолчанию 12 часов.

1	var gaugeDiv = document.getElementById("gauge-chart");
2
3	var traceA = {
4	type: "pie",
5	showlegend: false,
6	hole: 0.4,
7	rotation: 90,
8	values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100],
9	text: ["Very Low", "Low", "Average", "Good", "Excellent", ""],
10	direction: "clockwise",
11	textinfo: "text",
12	textposition: "inside",
13	marker: {
14	colors: ["rgba(255, 0, 0, 0.6)", "rgba(255, 165, 0, 0.6)", "rgba(255, 255, 0, 0.6)", "rgba(144, 238, 144, 0.6)", "rgba(154, 205, 50, 0.6)", "white"]
15	},
16	labels: ["0-10", "10-50", "50-200", "200-500", "500-2000", ""],
17	hoverinfo: "label"
18	};

Следующая часть кода касается иглы калибровочной диаграммы. Значение, заданное для переменной degrees, будет определять угол, на который рисуется стрелка. Переменная radius определяет длину иглы. Атрибуты x0 и y0 используются для установки начальной точки нашей строки. Аналогично, атрибуты x1 и y1 используются для установки конечной точки нашей строки.

Вы можете создавать более сложные фигуры с помощью путей SVG. Все, что вам нужно сделать, - установить атрибут type в path и указать фактический путь с использованием атрибута path. Вы можете узнать больше об этом в разделе макетов.

var degrees = 115, radius = .6;
var radians = degrees * Math.PI / 180;
var x = -1 * radius * Math.cos(radians);
var y = radius * Math.sin(radians);

var layout = {
  shapes:[{
      type: 'line',
      x0: 0,
      y0: 0,
      x1: x,
      y1: 0.5,
      line: {
        color: 'black',
        width: 8
      }
    }],
  title: 'Number of Printers Sold in a Week',
  xaxis: {visible: false, range: [-1, 1]},
  yaxis: {visible: false, range: [-1, 1]}
};

var data = [traceA];

Plotly.plot(gaugeDiv, data, layout, {staticPlot: true});

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

Please accept marketing cookies to load this content.

Заключение

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

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