Начинаем работать с Chart.js: радиальные и полярные диаграммы

() translation by (you can also view the original English article)

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

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

Создание радиальных диаграмм

Линейные и столбчатые диаграммы полезны, когда вы сравниваете одно или два показателя из множества объектов — например, популяция всех стран в Азии или количество различных популяций в атмосфере.

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

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

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

Давайте создадим нашу первую радиальную диаграмму. Радиальные диаграммы создаются ключом radar свойства type Chart.js. Вот простой пример.

var radarChart = new Chart(marksCanvas, {
    type: 'radar',
    data: marksData,
    options: chartOptions
});

Давайте построим оценки двух студентов одного класса по пяти различным предметам. Ниже приведен код предоставления данных для создания диаграммы.

var marksData = {
  labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
  datasets: [{
    label: "Student A",
    backgroundColor: "rgba(200,0,0,0.2)",
    data: [65, 75, 70, 80, 60, 80]
  }, {
    label: "Student B",
    backgroundColor: "rgba(0,0,200,0.2)",
    data: [54, 65, 60, 70, 70, 75]
  }]
};

var radarChart = new Chart(marksCanvas, {
  type: 'radar',
  data: marksData
});

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

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

Помимо цвета фона, вы можете изменить цвет и ширину границ для графика, используя ключи borderColor и borderWidth. Так же вы можете создать границу из пунктирной линиии вместо сплошной, используя ключ borderDash. Данный ключ принимает значение в виде массива.

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

Вы также можете настраивать цвет и ширину границы для построенных точек с помощью pointBorderColor и pointBorderWidth. Аналогичным образом вы можете также установить цвет фона для разных точек с помощью ключа pointBackgroundColor. Размер построенных точек можно задать с помощью ключа pointRadius. Вы можете контролировать расстояние, с которого точки должны начать взаимодействовать с мышью с помощью ключа pointHitRadius.

Вы также можете управлять появлением обрисованные точек при наведении с помощью ключей pointHoverBackgroundColor, pointHoverBorderColor и pointHoverBorderWidth. Вы должны помнить о том, что эти ключи «при наведении» не будут ждать, когда вы наведете курсор на элемент, чтобы сработать. Изменения вступят в силу, как только курсор окажется внутри радиуса попадания, указанного выше.

Для отображения точек можно использовать различные фигуры. По умолчанию они круглые. Однако вы можете изменить форму на triangle, rect, rectRounded, rectRot, cross, crossRot, star, line, и dash.

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

var marksData = {
  labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
  datasets: [{
    label: "Student A",
    backgroundColor: "transparent",
    borderColor: "rgba(200,0,0,0.6)",
    fill: false,
    radius: 6,
    pointRadius: 6,
    pointBorderWidth: 3,
    pointBackgroundColor: "orange",
    pointBorderColor: "rgba(200,0,0,0.6)",
    pointHoverRadius: 10,
    data: [65, 75, 70, 80, 60, 80]
  }, {
    label: "Student B",
    backgroundColor: "transparent",
    borderColor: "rgba(0,0,200,0.6)",
    fill: false,
    radius: 6,
    pointRadius: 6,
    pointBorderWidth: 3,
    pointBackgroundColor: "cornflowerblue",
    pointBorderColor: "rgba(0,0,200,0.6)",
    pointHoverRadius: 10,
    data: [54, 65, 60, 70, 70, 75]
  }]
};

var chartOptions = {
  scale: {
    ticks: {
      beginAtZero: true,
      min: 0,
      max: 100,
      stepSize: 20
    },
    pointLabels: {
      fontSize: 18
    }
  },
  legend: {
    position: 'left'
  }
};

Внутри объекта chartOptions, значения min и max, используются для установки минимального и максимальлного значений шкалы. Ключ stepSize может быть использован, чтобы сообщить Chart.js количество шагов, которые должны быть в промежутке от min до max. Вот итоговый вариант кода, показанного выше.

Создание полярных диаграмм

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

Радиус каждого сектора в этих диаграммах пропорционален квадратному корню из числа соответствующих объектов. В случае мигрирующих птиц радиус будет пропорционален квадратному корню из числа птиц в вашем районе.

Вы можете создать диаграммы с полярными областями в Chart.js, установив ключ type в значение polarArea. Вот основной код, который вам нужен для создания полярной диаграммы.

var polarAreaChart = new Chart(birdsCanvas, {
    type: 'polarArea',
    data: birdsData,
    options: chartOptions
});

Вот код для построения графика количества мигрирующих птиц на полярной диаграмме. Единственными данными, представленными на данный момент, является количество птиц и цвет фона для разных сезонов.

var birdsData = {
  labels: ["Spring","Summer","Fall","Winter"],
  datasets: [{
    data: [1200, 1700, 800, 200],
    backgroundColor: [
      "rgba(255, 0, 0, 0.5)",
      "rgba(100, 255, 0, 0.5)",
      "rgba(200, 50, 255, 0.5)",
      "rgba(0, 100, 255, 0.5)"
    ]
  }]
};

var polarAreaChart = new Chart(birdsCanvas, {
  type: 'polarArea',
  data: birdsData
});

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

Области полярной диаграммы предоставляют обычные параметры для установки backgroundColor, borderWidth, borderColor, hoverBackgroundColor, hoverBorderWidth и hoverBorderColor. Существуют также некоторые специальные ключи полярной диаграммы, которые вы можете использовать для настройки их внешнего вида.

Например, вы можете установить начальный угол для первого значения в наборе данных, используя ключ startAngle. Аналогично, ключ lineArc, который находится в scale, можно использовать, чтобы указать, должны ли рисованные линии быть круглыми или нет, установив для него значение true или false соответственно.

Секторы, нарисованные на диаграмме полярной области, по умолчанию повернуты и масштабированы. Однако вы можете предотвратить анимацию масштабирования, установив значение параметра animateScale в false. Аналогично, вращающаяся анимация может быть отключена, установив значение ключа animateRotate равным false. Оба эти ключа доступны в параметре animation.

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

var birdsData = {
  labels: ["Spring", "Summer", "Fall", "Winter"],
  datasets: [{
    data: [1200, 1700, 800, 200],
    backgroundColor: [
      "rgba(255, 0, 0, 0.6)",
      "rgba(0, 255,200, 0.6)",
      "rgba(200, 0, 200, 0.6)",
      "rgba(0, 255, 0, 0.6)"
    ],
    borderColor: "rgba(0, 0, 0, 0.8)"
  }]
};

var chartOptions = {
  startAngle: -Math.PI / 4,
  legend: {
    position: 'left'
  },
  animation: {
    animateRotate: false
  }
};

var polarAreaChart = new Chart(birdsCanvas, {
  type: 'polarArea',
  data: birdsData,
  options: chartOptions
});

Помимо поворота графика и отключения анимации вращения, мы также переместили легенду налево от графика, установив значение position в left. Это оставит достаточно места в верхней части диаграммы, чтобы отобразить её правильно.

В заключение

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

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

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