Пошаговое руководство по пользовательским графикам 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, который обеспечивает…