如何在 Angular 中使用 ng2-charts 来使用 Chart.js

介绍

Chart.js 是一个流行的 JavaScript 图表库,ng2-charts 是 Angular 2+ 的一个包装器,用于在 Angular 中集成 Chart.js。

在本教程中,您将使用 Chart.js 和 ng2-charts 在 Angular 应用程序中创建示例图表。

先决条件

要完成本教程,您需要:

  • 本地安装了 Node.js,您可以按照《如何安装 Node.js 并创建本地开发环境》中的步骤进行安装。
  • 对设置 Angular 项目和使用 Angular 组件有一定的了解可能会有所帮助。

本教程已使用 Node v14.13.1、npm v6.14.8、angular v10.1.6、chart.js v2.9.4 和 ng2-charts v2.4.2 进行验证。

步骤 1 —— 设置项目

您可以使用 @angular/cli 创建一个新的 Angular 项目。

在您的终端窗口中,使用以下命令:

npx @angular/cli new angular-chartjs-example --style=css --routing=false --skip-tests

这将配置一个新的 Angular 项目,样式设置为 “CSS”(而不是 “Sass”、“Less” 或 “Stylus”),没有路由,并跳过测试。

转到新创建的项目目录:

cd angular-chartjs-example

从项目文件夹中运行以下命令以安装 chart.js

npm install chart.js@2.9.4 ng2-charts@2.4.2

接下来,通过打开您的代码编辑器并修改 angular.json 来将 chart.js 添加到您的 Angular 应用程序中,以包括 Chart.min.js


{// ..."projects": {"angular-chartjs-example": {// ..."architect": {"build": {// ..."options": {// ..."scripts": ["node_modules/chart.js/dist/Chart.min.js"],"allowedCommonJsDependencies": ["chart.js"]},// ...},}}},// ...
}

然后,打开 app.module.ts 并修改它以导入 ChartsModule


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [BrowserModule,ChartsModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

有了这个基本结构,您可以开始创建图表组件。

步骤 2 —— 创建图表组件

让我们从一个示例开始,该示例使用一些选项作为输入来绘制与四个月内三个不同账户相关联的值。

ng2-charts 为您提供了一个 baseChart 指令,可以应用于 HTML canvas 元素。

在代码编辑器中打开 app.component.html 并用以下代码替换内容:


<div style="width: 40%;"><canvasbaseChart></canvas>
</div>

然后,修改 canvas 以传入 chartTypelegend


<div style="width: 40%;"><canvas...[chartType]="'line'"[legend]="true"></canvas>
</div>
  • chartType:这设置了图表的基本类型。值可以是 piedoughnutbarlinepolarArearadarhorizontalBar
  • legend:一个布尔值,用于指定是否应在图表上方显示图例。

然后,修改 canvas 以传入 datasets


<div style="width: 40%;"><canvas...[datasets]="chartData"></canvas>
</div>

接下来,在代码编辑器中打开 app.component.ts 来定义模板中引用的数组:


// ...
export class AppComponent {// ...chartData = [{data: [330, 600, 260, 700],label: 'Account A'},{data: [120, 455, 100, 340],label: 'Account B'},{data: [45, 67, 800, 500],label: 'Account C'}];
}
  • datasets:这应该是一个包含数据数组和每个数据集的标签的对象数组。
  • data:或者,如果您的图表很简单,只有一个数据集,您可以使用 data 而不是 datasets,并传入一个数据点数组。

现在,重新打开 app.component.html 并修改 canvas 以传入 labels


<div style="width: 40%;"><canvas...="chartLabels"></canvas>
</div>

接下来,再次在代码编辑器中打开 app.component.ts 来定义模板中引用的数组:


// ...
export class AppComponent {// ...chartLabels = ['January','February','March','April'];
}
  • labels:X 轴的标签数组。

现在,重新打开 app.component.html 并修改 canvas 以传入 options


<div style="width: 40%;"><canvas...[options]="chartOptions"></canvas>
</div>

接下来,再次在代码编辑器中打开 app.component.ts 来定义模板中引用的对象:


// ...
export class AppComponent {// ...chartOptions = {responsive: true};
}
  • options:一个包含图表选项的对象。您可以参考官方 Chart.js 文档了解可用选项的详细信息。

重新编译您的应用程序:

npm start

当在 Web 浏览器中访问您的应用程序(通常是 localhost:4200)时,您将看到一个图表,其中绘制了 Account AAccount BAccount CAprilFebruaryMarchApril 月份的数据:

!示例图表与 ng2-chart

Chart.js 还提供了官方文档中介绍的其他属性和选项。

第三步 — 处理 chartClickchartHover 事件

两个事件被触发,分别是 chartClickchartHover,它们提供了一种方式来响应用户与图表的交互。当前活动的点和标签将作为事件数据的一部分返回。

让我们创建一个示例,将它们添加到画布中。

打开 app.component.html 并添加 chartHoverchartClick

<div style="width: 40%;"><canvas...(chartHover)="onChartHover(($event)"(chartClick)="onChartClick(($event)"></canvas>
</div>

打开 app.component.ts 并添加你在模板中引用的自定义函数:

// ...
export class AppComponent {// ...onChartHover = ($event: any) => {window.console.log('onChartHover', $event);};onChartClick = ($event: any) => {window.console.log('onChartClick', $event);};
}

重新编译你的应用程序后,你将在开发者工具中观察到 onChartHoveronChartClick 被记录。

第四步 — 动态更新数据集

使用 Chart.js 的一个亮点是能够动态更新或响应从后端或用户输入接收到的数据。

让我们继续基于前面的示例,在 4 个月内绘制 3 个账户值,并为五月份添加新的数据点。

打开 app.component.ts 并定义自定义函数:

// ...
export class AppComponent {// ...newDataPoint(dataArr = [100, 100, 100], label) {this.chartData.forEach((dataset, index) => {this.chartData[index] = Object.assign({}, this.chartData[index], {data: [...this.chartData[index].data, dataArr[index]]});});this.chartLabels = [...this.chartLabels, label];}
}

如果没有传递数组给 newDataPoint(),则默认值为 [100, 100, 100]

在数据集数组上也没有进行 mutation。使用 Object.assign 返回包含先前数据和新数据的新对象。

然后,在 app.component.html 中,在 canvas 后使用自定义函数在一个 button 中:

<div style="width: 40%;">...<button (click)="newDataPoint([900, 50, 300], 'May')">添加数据点</button>
</div>

重新编译你的应用程序后,当你与 添加数据点 按钮交互时,你将观察到图表将为 五月 月份绘制 A 账户B 账户C 账户 的值。

结论

在本教程中,你使用了 Chart.js 和 ng2-charts 在 Angular 应用程序中创建了一个示例图表。

这些库共同为你提供了以现代和动态的方式呈现数据的能力。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/684333.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【解决(几乎)任何机器学习问题】:超参数优化篇(超详细)

这篇文章相当长&#xff0c;您可以添加至收藏夹&#xff0c;以便在后续有空时候悠闲地阅读。 有了优秀的模型&#xff0c;就有了优化超参数以获得最佳得分模型的难题。那么&#xff0c;什么是超参数优化呢&#xff1f;假设您的机器学习项⽬有⼀个简单的流程。有⼀个数据集&…

【Rust】使用Rust实现一个简单的shell

一、Rust Rust是一门系统编程语言&#xff0c;由Mozilla开发并开源&#xff0c;专注于安全、速度和并发性。它的主要目标是解决传统系统编程语言&#xff08;如C和C&#xff09;中常见的内存安全和并发问题&#xff0c;同时保持高性能和底层控制能力。 Rust的特点包括&#x…

python数据分析numpy基础之sum用法和示例

1 python数据分析numpy基础之sum用法和示例 python的numpy库的sum()函数&#xff0c;用于对数组指定轴的元素求和。 用法 numpy.sum(a, axisNone, dtypeNone, outNone, keepdims<no value>, initial<no value>, where<no value>)描述 入参a可以为数组或类…

java8-使用流-2

筛选各异的元素 流还支持一个叫作aistinct的方法&#xff0c;它会返回一个元素各异(根据流所生成元素的hashcode和eguals方法实现)的流。例如&#xff0c;以下代码会筛选出列表中所有的偶数&#xff0c;并确保没有重复。图5-2直观地显示了这个过程。 List<Integer>number…

Panalog 日志审计系统 sessiptbl.php 前台RCE漏洞复现

0x01 产品简介 Panalog是一款日志审计系统,方便用户统一集中监控、管理在网的海量设备。 0x02 漏洞概述 Panalog日志审计系统 sessiptbl.php接口处存在远程命令执行漏洞,攻击者可执行任意命令,接管服务器权限。 0x03 影响范围 version <= MARS r10p1Free 0x04 复现…

勒索病毒最新变种.faust勒索病毒来袭,如何恢复受感染的数据?

引言&#xff1a; 随着我们进入数字化时代&#xff0c;数据的重要性变得愈发显著&#xff0c;而网络安全威胁也日益增加。.faust勒索病毒是其中一种备受恶意分子钟爱的危险工具&#xff0c;它通过加密用户文件并勒索高额赎金来对个人和组织发起攻击。本文将深入探讨.faust勒索…

thinkphp+vue企业产品展示网站f7enu

本文首先介绍了企业产品展示网站管理技术的发展背景与发展现状&#xff0c;然后遵循软件常规开发流程&#xff0c;首先针对系统选取适用的语言和开发平台&#xff0c;根据需求分析制定模块并设计数据库结构&#xff0c;再根据系统总体功能模块的设计绘制系统的功能模块图&#…

紫微斗数双星组合:廉贞破军在卯酉

文章目录 前言内容总结 前言 紫微斗数双星组合&#xff1a;廉贞破军在卯酉 内容 紫微斗数双星组合&#xff1a;廉贞破军在卯酉 性格分析 廉贞星、破军星二星同宫&#xff0c;具有冒险开创的精神和领导能力&#xff0c;忍耐力强&#xff0c;工作积极稳重&#xff0c;冲劲大&a…

FreeSWITCH在session上执行定时挂机与取消

一、实验场景环境描述 FreeSWITCH测试机&#xff1a;192.168.137.32 会议室&#xff1a; test1 分机&#xff1a; 1000 模拟的场景&#xff1a; 1&#xff09;会议室test1邀请分机1000加入会议室 在邀请时&#xff0c;添加定时挂机任务。 2&#xff09;分机1000接通后&#x…

【51单片机】利用STC-ISP软件工具【定时器计算器】配置【定时器】教程(详细图示)(AT89C52)

前言 大家好吖&#xff0c;欢迎来到 YY 滴单片机系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过单片机的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的…

Shell脚本——提取目录名和文件名

目录 一、${} 1.${var##*/} 2.${var##*.} 3.${var#*.} 4.${var%/*} 5.${var%%.*} 6.总结 二、basename和dirname 1.basename 2.dirname 在许多场景下&#xff0c;我们都需要对文件名称或者文件所在的目录进行操作&#xff0c;已达到我们业务目的。通常的操作是由路径…

Python入门知识点分享——(二十一)多继承和运算符重载

在介绍新的知识之前&#xff0c;我们先对之前的内容做一点补充&#xff0c;在面向对象编程的过程中&#xff0c;一个对象常常被要求具备多方面的功能&#xff0c;从而和多个类产生联系&#xff0c;而这一步的实现就用到了“多继承”。多继承是指一个子类可以继承自多个父类&…

QGIS教程 加载shape数据 矢量数据(批量)

一. 前言 本篇文章主要介绍QGIS的使用&#xff0c;包括如何加载矢量shape数据、查看数据属性、如何加载txt属性数据、怎么用脚本批量加载矢量数据等内容。 如果想了解QGIS&#xff0c;可以参考博文&#xff1a; QGIS基本介绍 如果想了解shape数据格式详情&#xff0c;可以参考…

CVE-2023-41892 漏洞复现

CVE-2023-41892 开题&#xff0c;是一个RCE Thanks for installing Craft CMS! You’re looking at the index.twig template file located in your templates/ folder. Once you’re ready to start building out your site’s front end, you can replace this with someth…

leetcode刷题--贪心算法

七. 贪心算法 文章目录 七. 贪心算法1. 605 种花问题2. 121 买卖股票的最佳时机3. 561 数组拆分4. 455 分发饼干5. 575 分糖果6. 135 分发糖果7. 409 最长回文串8. 621 任务调度器9. 179 最大数10. 56 合并区间11. 57 插入区间13. 452 用最少数量的箭引爆气球14. 435 无重叠区间…

设备驱动开发_1

可加载模块如何工作的 主要内容 描述可加载模块优势使用模块命令效率使用和定义模块密钥和模块工作1 描述可加载模块优势 开发周期优势: 静态模块在/boot下的vmlinuz中,需要配置、编译、重启。 开发周期长。 LKM 不需要重启。 开发周期优于静态模块。 2 使用模块命令效率…

【AIGC】Stable Diffusion的ControlNet插件

ControlNet 介绍 ControlNet 插件是 Stable Diffusion 中的一个重要组件&#xff0c;用于提供对模型的控制和调整。以下是 ControlNet 插件的主要特点和功能&#xff1a; 模型控制&#xff1a; ControlNet 允许用户对 Stable Diffusion 中的模型进行精细的控制和调整。用户可以…

应急响应实战笔记01入侵排查篇(2)

第2篇&#xff1a;Linux 入侵排查 0x00 前言 当企业发生黑客入侵、系统崩溃或其它影响业务正常运行的安全事件时&#xff0c;急需第一时间进行处理&#xff0c;使企业的网络信息系统在最短时间内恢复正常工作&#xff0c;进一步查找入侵来源&#xff0c;还原入侵事故过程&…

[GXYCTF2019]禁止套娃

进来发现只有这句话&#xff0c;习惯性访问一下flag.php&#xff0c;发现不是404&#xff0c;那就证明flag就在这了&#xff0c;接下来要想办法拿到flag.php的源码。 这道题是.git文件泄露网页源码&#xff0c;githack拿到index.php源码 这里观察到多次判断&#xff0c;首先要…

电脑监控屏幕软件有哪些(监控电脑屏幕的软件)

随着信息技术的迅猛发展&#xff0c;电脑屏幕监控软件已成为企业、家庭以及教育机构保护数据安全、提升工作效率以及进行行为分析的重要工具。本文将详细介绍几款主流的电脑屏幕监控软件&#xff0c;包括它们的功能、特点以及适用场景&#xff0c;帮助读者更好地了解并选择合适…