ionic2实战-使用Chart.js
前言
安装Chart.js
- 执行
cnpm install typings -g
,全局安装Typings 执行
typings search chart.js
,使用Typings搜索Chart.js安装和使用typings进入app目录执行
typings install chart.js --source npm
app安装chart.js执行typings install chart.js --source npm会生成的文件最后执行
cnpm install chart.js
安装chart.js依赖安装chart.js依赖执行cnpm install chart.js在node_modules目录下生成的文件
使用Chart.js
我的contact.html
完整代码如下
<ion-header>
<ion-navbar>
<ion-title>
Contact
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div padding-vertical>
<canvas #chartBar height="200"></canvas>
</div>
<div padding-vertical>
<canvas #chartLine height="200"></canvas>
</div>
<div padding-vertical>
<canvas #chartPie height="200"></canvas>
</div>
</ion-content>
我的contact.ts
完整代码如下
import {Component, ViewChild, ElementRef} from '@angular/core';
import {NavController} from 'ionic-angular';
import Chart from 'chart.js'; // 导入chart.js
@Component({
selector: 'page-contact',
templateUrl: 'contact.html'
})
export class ContactPage {
@ViewChild('chartBar') chartBar: ElementRef;
@ViewChild('chartLine') chartLine: ElementRef;
@ViewChild('chartPie') chartPie: ElementRef;
constructor(private navCtrl: NavController) {
}
ionViewDidEnter() {
Chart.Bar(this.chartBar.nativeElement.getContext("2d"), {
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '呵呵',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Chart.Line(this.chartLine.nativeElement.getContext("2d"), {
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "哈哈",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
}
]
}
});
Chart.Doughnut(this.chartPie.nativeElement.getContext("2d"), {
data: {
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
}
});
}
}
效果展示

(转发至简书小军)
ionic2实战-使用Chart.js的更多相关文章
- chart.js angular组件封装(ng6)、实战配置、插件编写
前言 项目需要使用chart.js插件,由于项目是使用angular开发,那么我第一步就是先把chart.js改造成angular组件来使用. 本项目代码都可以在github上下载:项目git地址 a ...
- [转] angular2+highcharts+chart.js
这里是在ionic2下使用highchairs和chart.js的简单示例chartjs部分参考http://www.jianshu.com/p/bc18132da812 1.安装hightchart ...
- 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理
今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...
- Chart.js中文文档-雷达图
雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...
- JS组件系列——开源免费图表组件:Chart.js
前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...
- Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
- chart.js 里添加图表的清单:
chart.js 里添加图表的清单: var legend = myDoughnut.generateLegend(); $("#chart_legend").html(legen ...
- chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]
chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...
- 数据可视化(1)--Chart.js
Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等.在每种图表中,还包含了大量的自定义选项,包括动画展示形式. Char ...
随机推荐
- sqlldr将txt导入oracle数据库
注意事项: 1.userid 和 control关键字不要缺少: 2.注意数据库格式:test/test@数据库IP:1521/Oracle8,最后一个是tnsnames中的service_name, ...
- 【Java-JVM】定量分析解决OutOfMemoryError: PermGen space, 来看科学量化分析
网络上搜集,有操作有分析. 一.问题 在部署大型的 Java Web项目的时候,或者在 MyEclipse 中进行调试的时候经常出现: OutOfMemoryError: PermGen space ...
- Struts2 In Action笔记_页面到动作的数据流入和流出
因为回答百度知道的一个问题,仔细查看了<Struts2 In Action>,深入细致的看了 “数据转移OGNL 和 构建视图-标签”,很多东西才恍然大悟. 一直觉得国外写的书很浮,不具有 ...
- Java面向对象之继承,方法重写,super关键字,员工类系列继承题
在程序中,如果想声明一个类继承另一个类,需要使用extends关键字. 格式: class 子类 extends 父类 {} 继承的好处 1.继承的出现提高了代码的复用性,提高软件开发效率. 2.继承 ...
- C# 目录下的文件操作
运用DirectoryInfo类的对象我们可以轻松的实现对目录以及和目录中的文件相关的操作,假如你要获得某个目录F:\Pictures下的所有BMP文件,那么通过下面的代码就可以实现该功能. 上面的代 ...
- v4l2解析
v4l2的学习建议和流程解析: http://www.cnblogs.com/silence-hust/p/4464291.html 补充: 枚举设备所支持的image format: VIDIOC_ ...
- Vue入门之v-if的使用
在vue中一些常用的指令都是v-这样的,v-if是vue的一个内部指令,常用于html中 代码 <!DOCTYPE html> html lang="en"> & ...
- Vue入门之HelloWorld
对于新学习一门技术,一门语言比如JAVA.Python等都是从编写Hello World开始的,这样一来有益于初学者的人门,并给予初学者一定的信心,所以我也从HelloWorld开始讲起. 干货: 对 ...
- JS - 箭头函数与 () {} 的作用域
foo () { // ... } 等价于 foo: function () { // ... } foo: () => { // ... } 范例: // 全局 name = 'zhangsa ...
- Android 性能篇 -- 带你领略Android内存泄漏的前世今生
基础了解 什么是内存泄漏? 内存泄漏是当程序不再使用到的内存时,释放内存失败而产生了无用的内存消耗.内存泄漏并不是指物理上的内存消失,这里的内存泄漏是指由程序分配的内存但是由于程序逻辑错误而导致程序失 ...