一、相关资料

1. 简介

Chart.js 是一个基于 HTML5 的简单的面向对象的图表库，支持包括 IE7/8 和所有现代浏览器。支持六种图标：曲线图（Linecharts）、柱状图（Barcharts）、雷达图（Radarcharts）、饼状图（Piecharts）、极坐标区域图（Polararea charts）以及圆环图（Doughnutcharts）。并且带有动画效果（animated），支持 retina 屏。

2. 官网

官网：https://www.chartjs.org/

二、示例代码

本案例演示了最近 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 动态图表的使用的更多相关文章

  1. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

  2. [转]Chart.js入门教程

    Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...

  3. Chart.js入门教程

    Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...

  4. [转] angular2+highcharts+chart.js

    这里是在ionic2下使用highchairs和chart.js的简单示例chartjs部分参考http://www.jianshu.com/p/bc18132da812 1.安装hightchart ...

  5. 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  6. JS组件系列——开源免费图表组件：Chart.js

    前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...

  7. chart.js 里添加图表的清单：

    chart.js 里添加图表的清单: var legend = myDoughnut.generateLegend(); $("#chart_legend").html(legen ...

  8. 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

    超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...

  9. chart.js图表库案例赏析，饼图添加文字

    chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...

随机推荐

  1. [js]数组栈和队列操作

    写在前面 在项目中,对数组的操作还是比较常见的,有时候,我们需要模拟栈和队列的特性才能实现需求,这里记录一下这个知识点. 栈 栈(stack)又名堆栈,它是一种运算受限的线性表.其限制是仅允许在表的一 ...

  2. 使用Git Gui从Bonobo服务器中克隆Repository（仓库）

    刚开始在使用Git Gui从Bonobo服务器中克隆Repository(仓库)中遇到一些问题,如下图所示: 后来百度,有人遇到类似的问题,得到解决思路,请大家参考这里.大意说出现这个问题是因为要克隆 ...

  3. HDU 1041 Computer Transformation 数学DP题解

    本题假设编程是使用DP思想直接打表就能够了. 假设是找规律就须要数学思维了. 规律就是看这些连续的0是从哪里来的. 我找到的规律是:1经过两次裂变之后就会产生一个00: 00经过两次裂变之后也会产生新 ...

  4. SSO 单点登录简单流程（cas）

    配置服务端(链接数据库) 第一步: 下载cas-server端,解压开, 将中的解压开,将该包中的内容放入cas文件夹(新建文件夹)中 然后将这个文件夹放入到服务端的服务器(tomcat)中 将解压开 ...

  5. Redis 架构设计

    1.设计层面 (1) 存储小而热的数据 (2) 结合业务数据特点,正确使用内存类型 (3) 冷.热数据分离 2.架构层面 (1) 提前做好容量(内存)规划 (2) 结合持久化模式优劣正确使用,一般建议 ...

  6. zerglurker的C语言教程007——代码运行的顺序

    软件开发中.代码有三种基本运行顺序: 顺序运行 代码从入口開始一条一条运行.直到返回或者结束 循环运行 在设定条件后,代码反复运行某一个或多个部分,直到达到某些条件后终止 条件运行 代码会先推断某些条 ...

  7. void 0 或者 undefined

    Problem 在检查一个值是否为undefined的时候.你们是假设去測试的? 要是之前的我会这样子測试 function isUndefined(obj){ return obj === unde ...

  8. 从0开始学习 GitHub 系列汇总笔记

    本文学习自Stromzhang, 原文地址请移步:从0开始学习 GitHub 系列汇总 我的笔记: 0x00  从0开始学习GitHub 系列之[初识GitHub] GitHub 影响力 a.全球顶级 ...

  9. 关于cocos2d-x 和安卓之间的相互调用

    近期在研究cocos2d游戏移植安卓须要调用非常多方法.所以在研究之中写下它们之间相互调用 首先,cocos2d调用安卓 在一个.h文件里加入头文件 #include <jni.h> #i ...

  10. wampserver 安装多个php版本号报错之关键问题

    近期喜欢上用wampserver来搭建php本地执行环境 主要是一键安装 特easy 之前一直用的是 appserv 也挺好用的 用了wamp后 才发现wamp更好用 duang duang 默认下载 ...