Библиотека диаграмм JavaScript корпоративного уровня

Highcharts — это JavaScript-библиотека для построения диаграмм корпоративного уровня, основанная на SVG. Впервые он был выпущен в 2009 году компанией Highsoft в Вике, Норвегия.

Highcharts поддерживает длинный список различных типов диаграмм, включая line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemap, gauge и почти все типы диаграмм. Он поставляется с отличной документацией и бесчисленными примерами. Это мощный с низкой кривой обучения. Единственным недостатком является то, что лицензия является частной. Это бесплатно для личного / некоммерческого использования, но вы должны платить за коммерческие приложения.

Наряду с D3.js, Highcharts доминирует в приложении для построения графиков. Давайте посмотрим, как это работает.

Настройте рабочую среду

Мы собираемся использовать Create React App для изучения Highcharts. Следующая команда создает проект React:

% yarn create react-app react-highcharts
% cd react-highcharts

Установите highcharts и highcharts-react-official.

  • highcharts: Это библиотека построения диаграмм JavaScript.
  • highcharts-react-official: Это официальная оболочка для React, поддерживаемая Highcharts.
% yarn add highcharts highcharts-react-official

После установки эти пакеты становятся частью dependencies в package.json:

"dependencies": {
  "highcharts": "^10.3.2",
  "highcharts-react-official": "^3.1.0"
}

В рабочей среде добавить диаграмму так же просто, как добавить одну строку кода:

<HighchartsReact highcharts={Highcharts} options={option} />

Пример 1: Диаграммы основных типов

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

series: [
  {
    data: [1, 2, 1, 4, 3, 6],
  },
  {
    data: [2, 7, 0, 4, 6, 2],
  },
]

Измените src/App.css, чтобы иметь макет flex.

div {
  display: flex;
  flex-wrap: wrap;
}

Измените src/App.js, чтобы построить восемь диаграмм типа line, spline, area, areaspline, column, bar, pie и scatter.

  • В строках 6–28 создается конфигурация диаграммы.
    – В строках 7–11 определяются type, width и height диаграммы.
    – В строках 12–14 составляется заголовок диаграммы. от типа. Поскольку lodash поставляется с приложением Create React, вызывается _.startCase, чтобы сделать каждую начальную букву заглавной.
    — В строках 15–19, yAxis, ось Y или ось значений настроена с помощью title.
    – В строках 20–27 создаются два ряда данных.
  • В строках 33–40 каждая строка создает диаграмму указанного типа:
    – line (строка 33): Линейная диаграмма представлена ​​рядом точек данных, соединенных прямой линией.
    – spline (строка 34): сплайновая диаграмма рисует кривую линию между точками ряда данных.
    – area (строка 35): диаграмма с областями функционирует так же, как линейная диаграмма, за исключением того, что она заполняет область между линия и пороговое значение, которое по умолчанию равно 0.
    – areaspline (строка 36): диаграмма с областями аналогична диаграмме с областями, за исключением того, что линия представляет собой сплайн, а не прямую линию.
    > – column (строка 37): столбчатая диаграмма отображает данные в виде вертикальных полос.
    – bar (строка 38): столбчатая диаграмма аналогична столбчатой ​​диаграмме, за исключением того, что ось X и ось Y переключено.
    – pie (строка 39): круговая диаграмма представляет собой круговую диаграмму, разделенную на сектора, которые пропорциональны количеству, которое она представляет.
    – scatter (строка 40): точечная диаграмма рисует точку для каждой точки данных без их соединения.

Выполните yarn start, и мы увидим восемь диаграмм, каждая из которых относится к определенному типу.

Пример 2: Кредиты диаграммы и меню экспорта

Посмотрите на скриншот выше. По умолчанию Highcharts помещает метку/ссылку на кредиты в правом нижнем углу диаграммы.

Текст и ссылку можно настроить. И вот пример:

credits: {
  text: 'My Credits',
  href: 'https://jenniferfubook.medium.com/jennifer-fus-web-development-publications-1a887e4454af',
}

Или его можно отключить с помощью этого кода:

credits: {
  enabled: false,
}

Модуль экспорта Highcharts предоставляет меню с элементами меню, связанными с экспортом, для View in full screen, Print chart, Download PNG image, Download JPEG image, Download PDF document и Download SVG vector image.

Этот модуль может быть включен в одну строку кода.

require('highcharts/modules/exporting')(Highcharts);

Или две строки:

import HighchartsExporting from 'highcharts/modules/exporting';
HighchartsExporting(Highcharts);

По умолчанию меню находится в правом верхнем углу графика. Расположение и содержание могут быть настроены.

Вот модифицированный src/App.js:

  • В строках 5–6 загружается модуль экспорта.
  • В строках 30–32 кредиты по умолчанию отключены.

Выполняем yarn start и видим восемь графиков. У каждой диаграммы есть меню экспорта, а кредиты отключены.

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

На линейной диаграмме щелкните пункт меню Download PNG image, и он сохранит файл PNG в папку Downloads.

Каждую диаграмму можно сохранить в формате JPEG, PDF или SVG.

Пример 3. Базовые диаграммы в 3D-виде

highcharts-3d — это модуль Highcharts, обеспечивающий поддержку 3D. Его необходимо импортировать для создания 3D-диаграмм.

Этот модуль может быть включен в одну строку кода.

require('highcharts/highcharts-3d')(Highcharts);

Или две строки:

import Highcharts3D from 'highcharts/highcharts-3d';
Highcharts3D(Highcharts);

Настройка трехмерной диаграммы аналогична настройке обычной диаграммы, за исключением следующих параметров:

  • options3d настраивает параметр 3D. Флаг enabled включает трехмерную диаграмму. alpha и beta — это углы поворота вида диаграммы, а depth определяет общую глубину со значением по умолчанию 100. Вот пример:
options3d: {
  enabled: true,
  alpha: 15,
  beta: 30,
  depth: 300,
}
  • plotOptions.[type].depth определяет глубину каждого графика.
  • Данные диаграммы могут быть в разных форматах для каждого типа. xAxis определяет ось X или ось категории. Для наших 3D-примеров определены три xAxis для графиков на разной глубине, хотя сами эти xAxis не видны.

Вот модифицированный src/App.js:

  • В строках 6 и 8 загружается 3D-модуль Highcharts.
  • В строках 13–18 options3d включает трехмерные диаграммы и настраивает углы поворота и глубину.
  • В строках 28–38 три xAxis становятся невидимыми.
  • В строках 39–43 для plotOptions.[type].depth установлено значение 100.
  • В строках 44–57 series определяет графики для xAxis 0, xAxis 1 и xAxis 2. Каждый участок имеет шесть точек.

Выполните yarn start, и мы увидим восемь графиков в 3D-виде.

Вот некоторые наблюдения из скриншота выше:

  • Диаграммы line, spline, area, column и bar хорошо отображаются в 3D-виде.
  • areaspline не поворачивает вид, так как тип 3D официально не поддерживается.
  • Диаграмма pie работает, но три круга, складывающиеся друг на друга, выглядят неуклюже. Упрощение его до одного круга делает его более красивым:
series: [
  {
    data: [2, 2, 1, 4, 3, 2],
  },
]

  • График scatter не отображается. Обычные варианты, которые мы использовали, не работают для графика scatter. Данные должны быть закодированы в формате [x, y, z]. Кроме того, следует использовать тип scatter3d вместо scatter. Вот фиксированная конфигурация:
const getOptions = (type) => ({
  chart: {
    type: 'scatter3d',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 30,
      depth: 300,
    },
  },
  title: {
    text: _.startCase(`${type} chart`),
  },
  yAxis: {
    title: {
      text: 'Values',
    },
  },
  series: [
    {
      data: [[0, 2, 0], [1, 2, 0], [2, 1, 0], [3, 4, 0], [4, 3, 0], [5, 2, 0]],
    },
    {
      data: [[0, 4, 100], [1, 3, 100], [2, 6, 100], [3, 5, 100], [4, 4, 100], [5, 6, 100]],
    },
    {
      data: [[0, 5, 200], [1, 7, 200], [2, 7, 200], [3, 6, 200], [4, 7, 200], [5, 7, 200]],
    },
  ],
  credits: {
    enabled: false,
  },
});

Затем появляется трехмерная точечная диаграмма:

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

zAxis: {
  showFirstLabel: false
}

Теперь это выглядит лучше.

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

Вот модифицированный src/App.js:

Выполните yarn start, и мы увидим 3D точечную диаграмму, которую можно вращать:

Пример 4. Диаграммы интенсивности

Тепловая карта — это графическое представление данных, в котором отдельные значения, содержащиеся в матрице, представлены в виде цветов.

Для диаграммы тепловой карты необходимо импортировать модуль тепловой карты. Это может быть выполнено одной строкой кода:

require('highcharts/modules/heatmap')(Highcharts);

Или две строки:

import HighchartsHeatmap from 'highcharts/modules/heatmap';
HighchartsHeatmap(Highcharts);

xAxis.categories определяется следующим образом:

xAxis: {
  categories: ['A', 'B', 'C', 'D', 'E', 'F'],
}

yAxis.categories определяется следующим образом:

yAxis: {
  categories: ['Apple', 'Banana', 'Pear'],
}

Тогда data представляет собой матрицу 6 x 3, где [x, y, z] представляет значение z в точке [x, y]:

data: [
  [0, 0, 5], [0, 1, 8], [0, 2, 9],
  [1, 0, 3], [1, 1, 6], [1, 2, 2],
  [2, 0, 7], [2, 1, 1], [2, 2, 9],
  [3, 0, 4], [3, 1, 5], [3, 2, 1],
  [4, 0, 8], [4, 1, 6], [4, 2, 7],
  [5, 0, 7], [5, 1, 3], [5, 2, 4],
]

colorAxis — это цветовая ось для серий. Визуально он выглядит как градиент или как отдельные элементы внутри легенды. Вот colorAxis, который определяет градиент от '#FF0000' (красный) до '#0000FF' (синий).

colorAxis: {
  min: 0,
  minColor: '#FF0000',
  maxColor: '#0000FF',
}

Это выглядит так:

Вот модифицированный src/App.js:

  • В строках 6 и 8 загружается модуль тепловой карты.
  • В строке 13 добавьте plotBorderWidth для разделения областей тепловой карты.
  • В строках 18–20 xAxis определяется с помощью 6 categories.
  • В строках 21–25 yAxis определяется с помощью 3 categories. title отключается (строка 23), а categories отображается в порядке reversed.
  • В строках 26–30 colorAxis определяется как цвет градиента от белого (строка 28) к цвету первой серии (строка 29). colorAxis заменяет метки серий по умолчанию.
  • В строках 31–45 определяется data, а dataLables позволяет отображать значение тепловой карты в каждой области.
  • В строке 53 создается диаграмма тепловой карты.

Выполните yarn start, и мы увидим диаграмму тепловой карты.

Пример 5: Древовидные диаграммы

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

Диаграмма карты дерева требует импорта модуля карты дерева. Это можно сделать одной строкой кода:

require('highcharts/modules/treemap')(Highcharts);

Или две строки:

import HighchartsTreemap from 'highcharts/modules/treemap';
HighchartsTreemap(Highcharts);

data определяет иерархические отношения родитель-потомок вместе со значениями. Вот пример:

data: [
  {
    id: 'parentId',
    name: 'Parent',
    color: '#FF0000',
  },
  {
    name: 'child1',
    parent: 'parentId',
    value: 3,
  },
  {
    name: 'child2',
    parent: 'parentId',
    value: 5,
  },
]

Вот модифицированный src/App.js:

  • В строках 6 и 8 загружается модуль карты дерева.
  • В строке 16 в series указано type вместо chart.
  • В строке 17 layoutAlgorithm устанавливается на 'sliceAndDice’, что является поведением по умолчанию для разделения области на более мелкие части.
  • В строках 18–79 data определяет иерархические данные, которые определяют трех родителей: Red (строки 19–23), Green (строки 24–28) и Blue (строки 29–33). У Red три ребенка (строки 34–48), у Green двое детей (строки 49–58), а у Blue четверо детей (строки 59–78).
  • В строке 89 создается древовидная диаграмма.

Выполните yarn start, и мы увидим древовидную диаграмму.

Измените layoutAlgorithm на 'stripes’, и мы увидим, что области разделены на полосы:

Измените layoutAlgorithm на 'squarified’ или 'strip’, и мы увидим, что области разделены на следующие фигуры:

Пример 6: калибровочные диаграммы

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

Для калибровочной диаграммы необходимо импортировать модуль highcharts-more. Это можно сделать одной строкой кода:

require('highcharts/highcharts-more')(Highcharts);

Или две строки:

import HighchartsMore from 'highcharts/highcharts-more';
HighchartsMore(Highcharts);

Для калибровочной диаграммы yAxis задает значения min и max, а series.data определяет значение.

yAxis: {
  min: 0,
  max: 100,
},
series: [
  {
    data: [80],
  },
]

Вот модифицированный src/App.js:

  • В строках 6 и 8 загружается highcharts-more.
  • В строках 17–23 yAxis устанавливает min и max на 0 и 100. yAxis.title.text устанавливает на 'Speed'.
  • В строках 24–28 для series.data установлено значение 80.
  • В строке 36 создается калибровочная диаграмма.

Выполняем yarn start, и мы видим калибровочную диаграмму.

Диаграмма датчика может быть определена для любой дуги с pane.startAngle и pane.endAngle. Если это не полный круг, pane.background следует установить на null. Также рекомендуется настроить центр на позицию [x, y].

pane: {
  startAngle: -90,
  endAngle: 89.9,
  background: null,
  center: ['50%', '70%'],
}

Теперь мы видим половину калибра:

Мы можем стилизовать полосы датчика на основе значений yAxis.

yAxis: {
    min: 0,
    max: 100,
    title: {
      text: 'Speed',
    },
    plotBands: [
      {
        from: 0,
        to: 25,
        color: '#FF0000',
        thickness: 15,
      },
      {
        from: 25,
        to: 80,
        color: '#00FF00',
        thickness: 15,
      },
      {
        from: 80,
        to: 100,
        color: '#0000FF',
        thickness: 15,
      },
    ],
  }

Приведенный выше код определяет красную полосу для значений 0–25, зеленую полосу для значений 25–80 и синюю полосу для значений 80–100.

Кажется, что точка разворота находится слишком близко к числу.

Изменяем размер бэнда до размера 120%:

pane: {
  startAngle: -90,
  endAngle: 89.9,
  background: null,
  center: ['50%', '70%'],
  size: '120%',
}

Эта диаграмма выглядит красивее.

Пример 7: Доступность диаграммы

Выполняем примеры графиков, и видим в консоли следующее предупреждение.

highcharts.src.js:223 Предупреждение Highcharts: рассмотрите возможность включения модуля accessibility.js, чтобы сделать вашу диаграмму более удобной для людей с ограниченными возможностями. Установите для параметра accessibility.enabled значение false, чтобы удалить это предупреждение. См. https://www.highcharts.com/docs/accessibility/accessibility-module.

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

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

Модуль специальных возможностей можно импортировать одной строкой кода:

require('highcharts/modules/accessibility')(Highcharts);

Или две строки:

import HighchartsAccessibility from 'highcharts/modules/accessibility';
HighchartsAccessibility(Highcharts);

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

  • В строках 7 и 10 загружается модуль специальных возможностей.
  • В строках 19–22 accessibility определяет description.

Выполните yarn start и перепроверьте элементы диаграммы.

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

<div aria-hidden="false" style="position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip: rect(1px, 1px, 1px, 1px); margin-top: -3px; opacity: 0.01;">
  <p>Gauge Chart</p>
  <div>Chart with 1 data point.</div>
  <div>The gauge chart shows the performance speed between 0 and 100.</div>
  <div>The chart has 1 Y axis displaying Speed. Data ranges from 80 to 80.</div>
</div>

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

Бонусный пример: нарисуйте линию полной ширины по оси X

Мы приводим этот бонусный пример, так как вы можете столкнуться с этой проблемой при разработке продукта. Поместите эту простую линейную диаграмму в src/App.js, где ряду lineWidth присвоено значение 10 (строка 21):

Выполняем yarn start, и мы видим линейный график.

Вы заметили, что синяя линия на оси X тоньше?

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

yAxis: {
  title: {
    text: 'Values',
  },
  min: -0.2,
}

Выполните yarn start, и мы увидим полностью отображенную линию на оси X:

Заключение

Мы показали семь примеров Highcharts в React, которые включают 12 типов диаграмм line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemap и gauge.

Мы также написали статьи о других типах Highcharts:

По умолчанию Highcharts предоставляет возможности построения диаграмм JavaScript корпоративного уровня. Если ваш бюджет позволяет, Highcharts настоятельно рекомендуется.

Спасибо за прочтение.

Want to Connect? 

If you are interested, check out my directory of web development articles.