在 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 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
js获取页面description的方法
May 21 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
VUE长按事件需求详解
Oct 18 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
WebPack工具运行原理及入门教程
Dec 02 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
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
Smarty3配置及入门语法
2017/02/22 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
php将xml转化对象的实例详解
2021/11/17 PHP
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB