Как создать пользовательский график?

Question

Я разрабатываю приложение, используя Angular Framework. Мне нужно создать диаграмму, как показано ниже, я пробовал ngx-chart, но диаграмма шкалы сильно отличается от требований. Есть идеи?

нестандартный датчик

Answer 1

Вы можете использовать angular-google-charts или angular-highcharts для выполнения своей задачи. Угловые диаграммы Google - это оболочка библиотеки Google Charts для Angular 6+.

Если вы собираетесь использовать калибровочную диаграмму под углом, то вам необходимо установить пакет. После этого импортируйте его в app.module.ts

npm install angular-google-charts

Это 'high charts js' - библиотека графиков, основанная на SVG. «Highcharts» является чрезвычайно богатым на функциональность, чем диаграмма Gauge. Это поможет более настроить ваши графики. Поэтому, если вы собираетесь использовать 'highcharts', вам нужно установить нижеуказанные пакеты.

npm install angular-highcharts@6.2.6
npm install highcharts@4.2.5

После этого импортируйте его в app.module.ts. Ссылаясь на приведенную ниже статью, вы получите хорошее представление о том, как работают вышеупомянутые графики. введите описание ссылки здесь

Answer 2

При первом запуске npm install angular-gauge-chart

// ваш модуль приложения:

import { GaugeChartModule } from 'angular-gauge-chart'

imports: [
    GaugeChartModule,
]

// ваш tmpl:

<rg-gauge-chart
    [canvasWidth]="canvasWidth"
    [needleValue]="needleValue"
    [centralLabel]="centralLabel"
    [options]="options"
    [name]="name"
    [bottomLabel]="bottomLabel">
</rg-gauge-chart>