在 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 相关文章推荐
农历与西历对照
Sep 06 Javascript
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
js实现上传图片预览方法
Oct 25 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
vue 实现element-ui中的加载中状态
Nov 11 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 文件缓存函数
2011/10/08 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
Sea.JS知识总结
2016/05/05 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
python中强大的format函数实例详解
2018/12/05 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python安装Bs4的多种方法
2020/11/28 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
毕业生求职推荐信
2013/11/04 职场文书
药品促销活动方案
2014/02/14 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS