在 Angular 中使用Chart.js 和 ng2-charts的示例代码


Posted in Javascript onAugust 17, 2017

Chart.js是一个流行的JavaScript图表库,ng2图表是Angular 2+的包装器,可以轻松地将Chart.js集成到Angular中。 我们来看看基本用法。

安装

首先,在项目中安装 Chart.js 和 ng2-charts:

# Yarn:
$ yarn add ng2-charts chart.js

# or npm 
$ npm install ng2-charts charts.js --save

当然 ,如果你是使用Angular CLI构建的项目,你也可以很容易的添加Chart.js 添加.angular-cli.json配置文件中,以便将它与应用绑定在一直:

//: .angular-cli.json (partial)
"script": [
 "../node_modules/chart.js/dist/Chart.min.js"
]

现在,你需要在你的 app 模块或功能模块导入 ng2-charts 的ChartsModule:

//: app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from '@angular/charts';

import { AppComponent } from './app.component';

@NgModule({
 declarations: [ AppComponent ],
 imports: [
  BrowserModule,
  ChartsModule
 ],
 providers: [],
 bootstrap: [ AppComponent ]
})
export class AppModule {}

使用

ng2-charts 给我们提供了一个可以应用于HTML canvas元素的baseChart指令。 以下是一个示例,其中显示了一些用于输入的选项以及该指令输出的chartClick事件:

//: app.component.html

<div style="width: 40%;">
 <canvas
   baseChart
   [chartType]="'line'"
   [datasets]="chartData"
   [labels]="chartLabels"
   [options]="chartOptions"
   [legend]="true"
   (chartClick)="onChartClick($event)">
 </canvas>
</div>

这就是组件类现在的样子:

//: app.component.ts

import { Component } from '@angular/core';

@Component({ ... })
export class AppComponent {
 chartOptions = {
  responsive: true
 };

 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' }
 ];

 chartLabels = ['January', 'February', 'Mars', 'April'];

 onChartClick(event) {
  console.log(event);
 }
}

选项

以下就是不同的可选输入项:

chartType

设置图表的基本类型, 值可以是pipe,doughnut,bar,line,polarArea,radar或horizontalBar。

legend

一个布尔值,用于是否在图表上方显示图例。

datasets

包含数据数组和每个数据集标签的对象数组。

data

如果你的图表很简单,只有一个数据集,你可以使用data而不是datasets。

labels

x轴的标签集合

options

包含图表选项的对象。 有关可用选项的详细信息,请参阅官方Chart.js文档。

在上面的例子中,我们将图表设置为自适应模式,根据视口大小进行自动调整。

colors

在上面的例子中未显示,但你可以定义自己的颜色, 传入包含以下值的对象文字数组:

myColors = [
 {
  backgroundColor: 'rgba(103, 58, 183, .1)',
  borderColor: 'rgb(103, 58, 183)',
  pointBackgroundColor: 'rgb(103, 58, 183)',
  pointBorderColor: '#fff',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(103, 58, 183, .8)'
 },
 // ...colors for additional data sets
];

使用自定义颜色时,必须为每个数据集提供一个颜色对象字面量。

事件

发出两个事件,chartClick和chartHover,它们允许对与图表交互的用户做出反应。 当前活动点和标签作为发射事件数据的一部分返回。

动态更新数据集

当然,Chart.js的优点在于,您的图表可以轻松地通过动态更新/响应从后端或用户输入的数据。

下面这个示例中,我们为5月份添加了一个新的数据集合:

//: app.component.ts(partial)

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];

}

它可以像这样使用:

//: app.component.html(partial)

<button (click)="newDataPoint([900, 50, 300], 'May')">
 Add data point
</button>

你可能注意到了,我们不会对图表的数据集进行改动,而是使用新数据返回包含先前数据的新对象。 Object.assign可以很容易地做到这一点。

在这个特定的例子中,如果没有提供参数时,我们为3个数据集设定了默认值为100。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
javascript正则表达式总结
Feb 29 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
对vuex中store和$store的区别说明
Jul 24 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
微信小程序实现分页加载效果
Nov 19 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 #Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 #jQuery
详解JS中的柯里化(currying)
Aug 17 #Javascript
JavaScript实现简单评论功能
Aug 17 #Javascript
vue绑定class与行间样式style详解
Aug 16 #Javascript
Vue的MVVM实现方法
Aug 16 #Javascript
利用JS制作万年历的方法
Aug 16 #Javascript
You might like
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
JS数组实现分类统计实例代码
2018/09/30 Javascript
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python控制台英汉汉英电子词典
2020/04/23 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python 重命名轴索引的方法
2018/11/10 Python
opencv python图像梯度实例详解
2020/02/04 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
Python self用法详解
2020/11/28 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
《画》教学反思
2014/04/14 职场文书
医学生自荐信范文
2015/03/05 职场文书
爱心捐助活动总结
2015/05/09 职场文书
大国崛起日本观后感
2015/06/02 职场文书
地雷战观后感
2015/06/09 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL