在 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 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
JavaScript canvas绘制折线图
Feb 18 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 调用远程url的六种方法小结
2009/11/02 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
php异常处理捕获错误整理
2019/09/23 PHP
javascript天然的迭代器
2010/10/29 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
pygame实现非图片按钮效果
2019/10/29 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
石油大学毕业生自荐信
2014/01/28 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
房屋出租委托书格式
2014/09/23 职场文书
银行授权委托书格式
2014/10/10 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
回复函范文
2015/07/14 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
Python实现照片卡通化
2021/12/06 Python