如何创建自定义仪表图？答案

【问题标题】：How to create custom gauge chart?如何创建自定义仪表图？
【发布时间】：2019-10-06 18:22:18
【问题描述】：

我正在使用 Angular 框架开发应用程序。我需要创建一个如下所示的仪表图，我尝试过 ngx-chart 但仪表图与要求完全不同。有什么想法吗？

custom gauge

【问题讨论】：

我建议您可能想要创建一个有角度的自定义组件并使用 SVG（或画布）来显示它。

标签： html css angular

【解决方案1】：

第一次运行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>

【讨论】：

【解决方案2】：

您可以使用 angular-google-charts 或 angular-highcharts 来完成您的任务。 Angular Google 图表是 Angular 6+ 的 Google 图表库的包装器。

如果您要使用角度图表，那么您必须安装该软件包。之后将其导入 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。通过参考以下文章，您将对上述图表的工作方式有一个很好的了解。 enter link description here

【讨论】：