Ngx-Charts：Angular 的数据可视化库
在Angular中使用ngx-charts进行数据可视化
在Angular中使用ngx-charts进行数据可视化
目录
介绍
在构建 Web 应用程序时，数据可视化在帮助用户理解复杂数据集方面发挥着至关重要的作用。ngx -charts正是为此而生。ngx-charts 是一个流行的 Angular 项目图表库，它提供了种类繁多的可定制交互式图表。无论您是构建仪表盘、报表工具还是其他任何数据可视化解决方案，ngx-charts 都能帮助您轻松地为 Angular 应用程序添加精美的图表。本文将探讨如何开始使用 ngx-charts，它提供的各种图表类型，以及如何根据项目需求进行自定义。无论您是经验丰富的 Angular 开发人员还是新手，本文都将帮助您使用 ngx-charts 为您的项目添加强大的数据可视化功能。
支持的图表类型
ngx-charts 是一个用于 Angular 的图表库，它提供了各种可定制的交互式图表类型。ngx-charts 支持的图表类型包括折线图、面积图、柱状图、水平柱状图、饼图、环形图、仪表盘图、热力图、力导向图、气泡图以及其他变体。
- 折线图和面积图可用于显示一段时间内的趋势或比较两个或多个类别之间的值。
- 条形图和水平条形图适合比较不同类别之间的数值，或者以排名形式显示数据。
- 饼图和环形图有助于将数据作为整体的一部分进行展示，并能以简单明了的方式快速可视化数据。
- 进度图表非常适合用来展示实现特定目标或指标的进展情况。
- 热力图可以用来以二维形式显示数据分布和模式，而力导向图则非常适合可视化复杂的关系和网络结构。
- 气泡图适用于显示三个或三个以上数据维度之间的关系。
总而言之，在 ngx-charts 中选择合适的图表类型取决于您的数据类型以及您想要传达的洞察。充分了解支持的图表类型及其优势，ngx-charts 可以帮助您在 Angular 项目中创建强大且美观的数据可视化图表。
安装
要使用 ngx-charts，首先需要安装 npm 模块。在项目根目录下打开终端，然后运行以下命令：
npm i @swimlane/ngx-charts
然后我们还必须安装以下对等依赖项：
npm install @types/d3 --save-dev
现在我们已经在项目中安装了 npm 模块，可以使用 ngx-charts 了。为此，请打开 ngx-charts 文件，并在 imports 数组中AppModule(app.module.ts)添加 ngx-charts ：NgxChartsModule
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgxChartsModule } from "@swimlane/ngx-charts";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
NgxChartsModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
- 请注意，
BrowserAnimationsModule图表也带有动画效果，所以需要添加动画。
用法
我将向您展示一些我常用的图表的基本示例。许多图表选项都是可自定义的，但我们只重点介绍其中几种。如果您想了解不同图表的可自定义属性，可以点击此处查看相关说明。这些图表广泛应用于商业、金融和科学等各个行业，可以帮助您有效地传达复杂的数据和见解。
我将简要介绍其中几种不同的特性：
- 视图- 图表的尺寸[宽度，高度]。如果未定义，图表将适应父容器的大小。
- 结果- 图表数据方案 - 图表配色方案（也支持自定义方案）
- x轴- 显示或隐藏x轴
- y轴- 显示或隐藏y轴
- showGridLines - 显示或隐藏网格线（必须显示 x 轴或 y 轴才能生效）
-
格式化程序——用于格式化文本。以下代码片段中可以看到示例。
- 数据标签格式化
- 工具提示文本
- y轴刻度格式
- x轴刻度格式
- 值格式化
- ETC。
垂直条形图示例
代码片段：
app.component.html
<ngx-charts-bar-vertical
[results]="dataVBC"
[view]="viewVBC"
[animations]="animationsVBC"
[legend]="legendVBC"
[xAxis]="xAxisVBC"
[yAxis]="yAxisLabelVBC"
[showYAxisLabel]="showYAxisLabelVBC"
[yAxisLabel]="yAxisLabelVBC"
[dataLabelFormatting]="dataLabelFormatterVBC"
></ngx-charts-bar-vertical>
app.component.ts
// Options for Vertical Bar Chart
dataVBC = DummyData.totalNominalGDP;
viewVBC: [number, number] = [800, 300];
animationsVBC = false;
legendVBC = true;
xAxisVBC = true;
yAxisVBC = true;
showYAxisLabelVBC = true;
yAxisLabelVBC = "Amount in Trillions ($)";
dataLabelFormatterVBC(tooltipText: any) {
return "$" + tooltipText + " trillion";
}
结果：
饼图示例
代码片段：
app.component.html
<ngx-charts-pie-chart
[results]="dataPC"
[view]="viewPC"
[animations]="animationPC"
[scheme]="colorSchemePC"
[labels]="labelsPC"
[doughnut]="doughnut"
[tooltipText]="percentageFormatterPC"
></ngx-charts-pie-chart>
app.component.ts
// Options for Pie Chart
dataPC = DummyData.totalPopulation;
viewPC: [number, number] = [700, 400];
animationPC = true;
colorSchemePC = "vivid";
labelsPC = true;
doughnut = true;
percentageFormatterPC(data: any): string {
return data.value + "%";
}
结果：
折线图示例
代码片段：
app.component.html
<ngx-charts-line-chart
[results]="dataLC"
[view]="viewLC"
[animations]="animationsLC"
[showGridLines]="showGridLinesLC"
[legend]="legendLC"
[legendTitle]="legendTitleLC"
[roundDomains]="roundDomainsLC"
[xAxis]="true"
[yAxis]="true"
[yAxisTickFormatting]="currencyFormatterLC"
[xAxisTickFormatting]="dateFormatterLC"
></ngx-charts-line-chart>
app.component.ts
// Options for Line Chart
dataLC = DummyData.annualWageSalary;
viewLC: [number, number] = [700, 300];
animationsLC = true;
showGridLinesLC = true;
legendLC = true;
legendTitleLC = "Countries";
roundDomainsLC = true;
xAxisLC = true;
yAxisLC = true;
currencyFormatterLC(moneyAmount: any): string {
const currencyFormat = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
});
return currencyFormat.format(moneyAmount);
}
dateFormatterLC(date: string): string {
const datePipe = new DatePipe("en-US");
let formatted = datePipe.transform(date);
return formatted ? formatted : date;
}
结果：
数字卡片示例
代码片段：
app.component.html
<ngx-charts-number-card
[view]="viewNC"
[animations]="animationsNC"
[results]="dataNC"
[scheme]="colorSchemeNC"
[valueFormatting]="currencyFormatterNC"
></ngx-charts-number-card>
app.component.ts
// Options for Number Cards
dataNC = DummyData.highestAvgAnnualSalary;
viewNC: [number, number] = [800, 150];
animationsNC = true;
colorSchemeNC = "fire";
currencyFormatterNC(moneyAmount: any): string {
const currencyFormat = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
});
return currencyFormat.format(moneyAmount.value);
}
结果：
用于图表的数据集可在以下位置找到data.ts：
export const totalNominalGDP = [
{
name: "USA",
value: 23.17,
},
{
name: "China",
value: 16.28,
},
{
name: "Japan",
value: 5.15,
},
{
name: "Germany",
value: 4.25,
},
{
name: "United Kingdom",
value: 3.09,
},
];
export const totalPopulation = [
{
name: "Rest",
value: 53.24,
},
{
name: "China",
value: 18.47,
},
{
name: "India",
value: 17.7,
},
{
name: "USA",
value: 4.25,
},
{
name: "Indonesia",
value: 3.51,
},
{
name: "Pakistan",
value: 2.83,
},
];
export const annualWageSalary = [
{
name: "USA",
series: [
{
value: 39238,
name: "2000-09-24T00:33:38.246Z",
},
{
value: 45647,
name: "2005-09-24T00:33:38.246Z",
},
{
value: 53235,
name: "2010-09-24T00:33:38.246Z",
},
{
value: 59993,
name: "2015-09-24T00:33:38.246Z",
},
{
value: 71655,
name: "2020-09-24T00:33:38.246Z",
},
],
},
{
name: "Bulgaria",
series: [
{
value: 1910,
name: "2000-09-24T00:33:38.246Z",
},
{
value: 3030,
name: "2005-09-24T00:33:38.246Z",
},
{
value: 6180,
name: "2010-09-24T00:33:38.246Z",
},
{
value: 7110,
name: "2015-09-24T00:33:38.246Z",
},
{
value: 9320,
name: "2020-09-24T00:33:38.246Z",
},
],
},
];
export const highestAvgAnnualSalary = [
{
name: "Luxembourg",
value: 128169,
},
{
name: "Switzerland",
value: 94794,
},
{
name: "Ireland",
value: 87688,
},
{
name: "Norway",
value: 85358,
},
{
name: "United States",
value: 68309,
},
];
图表预览
开发者可以使用以下网址——Ngx -Charts Showcase——来探索 ngx-charts 中不同的图表类型及其自定义选项。该网址指向 ngx-charts 的演示页面，其中提供了各种示例图表，您可以与之交互并进行自定义。
通过预览页面，开发者可以尝试不同的图表类型，例如折线图、面积图、柱状图、饼图和仪表盘图，并通过更改颜色、标签和图例来自定义图表外观。该页面还提供启用动画、工具提示和图例的选项，帮助开发者更好地了解 ngx-charts 的各种功能。
总的来说，演示页面对于想要更好地了解 ngx-charts 的功能并尝试不同图表类型和自定义选项的开发人员来说是一个很好的资源。
最佳实践
在 Angular 项目中使用 ngx-charts 时，您应该遵循一些最佳实践，以确保充分利用该库的功能。以下是一些需要注意的事项：
- 保持数据干净一致：在将数据传递给 ngx-charts 之前，请确保数据干净且一致。这将确保图表准确且易于理解。
- 选择合适的图表类型：根据要可视化的数据选择合适的图表类型。选择最能展现您的数据和见解的图表类型。
- 自定义外观：自定义图表的外观，使其更具视觉吸引力并符合品牌形象。使用与应用程序其他部分一致的颜色、字体和布局。
- 优化性能：确保图表已针对性能进行优化。如果要显示大量数据，请使用延迟加载或分页功能，以避免出现任何性能问题。
- 彻底测试：在不同的设备和屏幕尺寸上彻底测试您的图表，以确保它们显示正确且易于阅读。
遵循这些最佳实践，您可以在 Angular 项目中使用 ngx-charts 创建有效且视觉上吸引人的数据可视化效果。
概括
总之，ngx-charts是一个功能强大且灵活的图表库，可以帮助您为 Angular 项目添加复杂的数据可视化功能。ngx-charts 提供丰富的图表类型、便捷的自定义选项和完善的文档，让您轻松构建精美图表，生动展现数据。无论您是构建数据丰富的仪表盘还是自定义报表工具，ngx-charts 都能帮助您打造流畅直观的用户体验。通过本文介绍的技巧和方法，您可以充分利用 ngx-charts 来增强 Angular 应用的数据可视化能力，并为用户提供更深入的洞察。
- 本文的源代码可以在我的Github仓库中找到。