Highcharts - это библиотека для построения графиков и визуализации данных, написанная на JavaScript. Эта библиотека в настоящее время поддерживает линию, сплайн, площадь, площадь-сплайн, столбец, столбец, круговую диаграмму, разброс, угловые датчики, диапазон-площадь, диапазон-сплайна-площадь, диапазон-столбца, пузырь, прямоугольную диаграмму, полосы ошибок, воронку, водопад. и типы полярных диаграмм.
Когда я познакомился с библиотекой Highcharts на работе, я был поражен тем, сколько в ней функций и простотой передачи данных из любого источника в элементы пользовательского интерфейса. В этой статье мы рассмотрим процесс настройки библиотеки с помощью React, а также у нас будет несколько примеров. Надеюсь, вам понравится это краткое руководство.
1. Настройка
Хорошо, давайте начнем и быстро рассмотрим, как использовать Highcharts с React. Это не учебник по React. Я предполагаю, что у вас уже есть запущенное и запущенное приложение React. Для этого вам понадобятся два пакета, один называется highcharts, а другой highcharts-react-official. Мы можем установить их оба с помощью команды npm:
npm i highcharts highcharts-react-official
2. Импорт в приложение React
Теперь, когда у нас установлены пакеты, нам нужно импортировать их в App.js, использовать компонент Highcharts и передать ему props:
Поскольку мы передали пустой объект в опору options, будут отображаться пустые диаграммы только с заголовком.
3. Простой пример с реальными опционами.
Мы добавим простые параметры с объектом только series. Объект опции серии - это массив объектов, которые могут иметь имя и данные для визуализации.
Мы передали эти параметры в качестве опоры здесь, и теперь наша диаграмма работает в нашем приложении React:
4. Более сложный пример.
В этом примере мы создадим столбчатые диаграммы с множеством функций, таких как метка данных, заголовок, ширина границы и всплывающие подсказки.
Мы видим много вариантов, многие из них говорят сами за себя, однако в нашей диаграмме мало что изменилось:
...
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
},
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
...
plotOptions имеет свойство series, которое определяет ширину границы 0 и метку данных в процентах format: ‘{point.y:.1f}%’.
tooltip имеет два свойства: одно - это headerFormat, которое является span из {series.name}, а другое - это pointFormat, которое позволяет нам отображать в всплывающей подсказке {point.name} и его процентное значение {point.y:.2f}%.
Давайте попробуем добавить pointPadding: 0.2,, чтобы мы могли настроить ширину полос:
...
plotOptions: {
series: {
pointPadding: 0.2,
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
},
}
},
...
4. Круговые диаграммы.
Highcharts очень гибок, что дает нам возможность создать совершенно другой график с одной заменой линии,
...
chart: {
type: 'pie' {" instead of column in previous example"}
},
...
Как упоминалось выше, существует много типов диаграмм, и надежность этой библиотеки заставляет нас беспокоиться только о данных, а весь пользовательский интерфейс обрабатывается, скажем, с помощью модуля JavaScript API для обработки всех свойств данных, которые мы хотим просмотреть.
В конце концов, это очень быстрое руководство, в следующий раз мы расскажем о многих типах диаграмм и о том, как максимально эффективно использовать эту библиотеку с помощью параметров objects.
Заботиться!
