Эта статья поможет вам использовать официальную оболочку Highcharts для Angular для создания интерактивных диаграмм для ваших веб-проектов.

Выполнение настройки

1. Установите следующие зависимости —

  • хайчарты
  • highcharts-угловой
npm install --save highcharts highcharts-angular

2. Импортируйте зависимость в свой модуль

import { HighchartsChartModule } from 'highcharts-angular';
@NgModule({
declarations: [
AppComponent,
ChartWrapperComponent
],
imports: [
BrowserModule,
HighchartsChartModule
],
providers: [],
bootstrap: [AppComponent]
})

3. Создайте компонент-оболочку

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

  • импортировать все из «highcharts» (см. Синтаксис ниже)
  • В параметрах диаграммы добавьте нужный тип диаграммы и другие необходимые метаданные.

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



highcharts-angular
Официальная минимальная оболочка Highcharts для Angular Убедитесь, что у вас обновлены Node, NPM и Angular.www.npmjs.com



В HTML используйте ‹highcharts-chart›

chart-wrapper.component.html
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 400px; display: block;"
></highcharts-chart>

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



Домашняя страница | Главная страница блога | Highcharts
Библиотека JavaScript для создания интерактивных диаграмм для мобильных и веб-проектов. Создайте визуализацию данных с помощью Angular…www.highcharts.com