Пошаговое руководство по пользовательским графикам Highcharts

Введение

Highcharts — это библиотека диаграмм JavaScript корпоративного уровня, основанная на SVG. Он поставляется с отличной документацией и бесчисленными примерами. Единственным недостатком является то, что лицензия является частной. Он бесплатен для личного/некоммерческого использования, но за коммерческие приложения необходимо платить.

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

Давайте посмотрим, как это работает.

Базовая диаграмма

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

% yarn create vite react-custom-graphs --template react
% cd react-custom-graphs

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

% yarn add highcharts highcharts-react-official

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

"dependencies": {
  "highcharts": "^11.1.0",
  "highcharts-react-official": "^3.2.0"
}

У нас есть рабочая среда для изучения Highcharts.

Как мы объясняли в предыдущей статье, для каждого графика рекомендуется включать следующий импорт:

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsAccessibility from 'highcharts/modules/accessibility';
  • highcharts: Это библиотека диаграмм JavaScript.
  • highcharts-react-official: Это официальная оболочка React, поддерживаемая Highcharts.
  • highcharts/modules/exporting: это модуль экспорта Highcharts, который предоставляет меню с пунктами меню, связанными с экспортом, для View in full screen, Print chart, Download PNG image, Download JPEG image, Download PDF document и Download SVG vector image.
  • highcharts/modules/accessibility: Это модуль доступности Highcharts, который обеспечивает…