Chart.js 动态图表的使用
一、相关资料
1. 简介
Chart.js 是一个基于 HTML5 的简单的面向对象的图表库，支持包括 IE7/8 和所有现代浏览器。支持六种图标：曲线图（Linecharts）、柱状图（Barcharts）、雷达图（Radarcharts）、饼状图（Piecharts）、极坐标区域图（Polararea charts）以及圆环图（Doughnutcharts）。并且带有动画效果（animated），支持 retina 屏。
2. 官网
二、示例代码
本案例演示了最近 24 小时的 PV/UV 实时数据，在线 DEMO：
<!DOCTYPE html>
<html>
<head>
<title>Chart.js 动态图表的使用</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>
<body>
<div>
<canvas id="chart"></canvas>
</div>
<script type="text/javascript">
var dataLabels = ['1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h', '0h'];
var dataPV = [133058,253219,255194,233058,253219,277318,277714,273337,255194,277318,277714,273337,233058,253219,277318,253219,277318,277714,273337,255194,277714,273337,255194,293058];
var dataUV = [10651,22039,23955,23754,22664,10651,22039,23765,23955,23754,22664,23765,23955,23754,22664,10651,22039,23765,10651,22039,23765,23955,23754,22664];
var config = {
type: 'line',
data: {
labels: dataLabels,
datasets: [
{
label: 'PV',
data: dataPV,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
fill: false,
},
{
label: 'UV',
data: dataUV,
backgroundColor: 'rgb(75, 192, 192)',
borderColor: 'rgb(75, 192, 192)',
fill: false,
}
]
},
options: {
responsive: true,
title: {
display: true,
text: 'PV/UV 实时统计'
},
}
};
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, config);
setInterval(function() {
if (config.data.datasets.length > 0) {
var last = parseInt(dataLabels[dataLabels.length - 1]);
var label = last + 1;
if (last >= 23) {
label = 0;
}
label = label + 'h';
dataLabels.push(label);
dataPV.push(getRandomNum(200000, 300000));
dataUV.push(getRandomNum(10000, 80000));
dataLabels.shift();
dataPV.shift();
dataUV.shift();
chart.update();
}
}, 1000);
function getRandomNum(min, max) {
var range = max - min;
var rand = Math.random();
return(min + Math.round(rand * range));
}
</script>
</body>
</html>
本文首发于马燕龙个人博客，欢迎分享，转载请标明出处。
马燕龙个人博客：http://www.mayanlong.com
马燕龙个人微博：http://weibo.com/imayanlong
马燕龙Github主页：https://github.com/yanlongma
Chart.js 动态图表的使用的更多相关文章
- Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
- [转]Chart.js入门教程
Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...
- Chart.js入门教程
Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...
- [转] angular2+highcharts+chart.js
这里是在ionic2下使用highchairs和chart.js的简单示例chartjs部分参考http://www.jianshu.com/p/bc18132da812 1.安装hightchart ...
- 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...
- JS组件系列——开源免费图表组件：Chart.js
前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...
- chart.js 里添加图表的清单：
chart.js 里添加图表的清单: var legend = myDoughnut.generateLegend(); $("#chart_legend").html(legen ...
- 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...
- chart.js图表库案例赏析，饼图添加文字
chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...
随机推荐
- XCODE 4.5 IOS多语言设置 及NSLocalizedString和NSLocalizedStringFromTable的用法。
前 些天升级到Xcode4.5,现在正在用Xcode4.5+IOS6开发项目,当使用国际化时,遇到了一点问题,之前版本Xcode上新建 Localizable.strings后,添加语言的“+”号不见 ...
- Linux USB驱动数据结构
struct usb_ctrlrequest { __u8 bRequestType; __u8 bRequest; __le16 wValue; __le16 wIndex; ...
- antialiasing
Aliasing发生的原因在于,采样频率过低, 这样就无法重建更接近原来texture的图像, Temporal aliasing在时域上 采的texture 次数太少 不能重建真实 是帧与帧之间,s ...
- Python moni模拟鼠标事件
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 4 ...
- http://preshing.com/
http://preshing.com/ http://mechanical-sympathy.blogspot.com/
- linux挂载硬盘
最近有个生产机由于缓存问题,硬盘不太够用,所以就加载了一块硬盘,下面把挂载硬盘的过程记录下,供大家参考,有问题欢迎留言! fdisk –l ------------------------------ ...
- 修改Oracle SGA，以提高oracle性能
在正常情况下,查询非常慢. 1.检查SGA大小,以DBA身份连接到oracle数据库,输入show sga. 2.如果SGA过小,请修改其大小 修改SGA必须保持的原则 1).sga_target不能 ...
- yosemite开启HAXM硬件加速执行安卓虚拟机
android sdk安装HAXM发现不能正常执行 $ kextstat | grep intel 发现无进程执行 $ sudo kextload –b com.intel.kext.intelhax ...
- redis安装报错
错误原因大概是这个: creating server tcp listening socket 127.0.0.1:6379: bind No error 解决方案如下按顺序输入如下命令就可以连接成功 ...
- IP地址 网段的划分
IP和子网掩码我们都知道,IP是由四段数字组成,在此,我们先来了解一下3类常用的IP A类IP段 0.0.0.0 到127.255.255.255 B类IP段 128.0.0.0 到191.255. ...