一、相关资料

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. RHEL CentOS Fedora各种源介绍和安装

    CentOS默认自带CentOS-Base.repo源,但官方源中去除了很多有版权争议的软件,而且安装的软件也不是最新的稳定版.   下面介绍各种第三方软件库,以下软件库适用于与RHEL完全兼容的li ...

  2. ElasticSearch搜索term和terms的区别

    今天同事使用ES查询印地语的文章.发现查询报错,查询语句和错误信息如下: 查询语句:{    "query":{        "bool":{         ...

  3. 2016.10.17 yaml文件里的labels和Pod、RC、Service的对应关系

    在看kubernetes的例子时,出现了一个疑问. Pod.RC.Service的yaml文件里,都出现了labels,还有labelSelector.有些不太清楚,因此就这点来学习下.   接上文: ...

  4. 移植opencv2.4.9到itop4412开发板

    OpenCV是眼下开源项目中最著名的基于机器视觉方向的图像处理的开发包,眼下已经有被移植到嵌入式Linux环境上. 本文介绍了OpenCV交叉编译的基本步骤. 在opencv交叉编译之前要先进行依赖库 ...

  5. MD5算法了解(JAVA实现)

    MD5算法:尽管已经被破解,但任然广泛应用于各个领域中 如文件校验:当我们下载文件时为了保证文件的安全性,我们能够在其站点上找到相应的md5值进行校验,假设md5值不一致,也就是说文件被人动过(一般都 ...

  6. mysql使用mysqldump 与 mysqlimport进行数据库迁移

    1.导入数据库 1)source source /home/platvt/product/pc2_create_tables.sql 2)mysqlimport 使用mysqlimport导入数据: ...

  7. hibernate 过滤

    1.可以使用@Where的过滤,不过这种过滤式全局的,支持延迟加载. 2.可以使用@Filters,这种过滤不支持延迟加载. @Entity@Table(name = "qc315_tous ...

  8. javascript获取星期

    入门: var week = new Date().getDaty(); var ary = new Array("日","一","二",& ...

  9. CentOS7.1 KVM虚拟化之经常使用管理虚拟机命令(3)

    一.查看虚拟机列表及状态 [root@kvm01 ~]# virsh list --all Id Name State ---------------------------------------- ...

  10. openssl源码安装

    下载最新的OpenSSL http://openssl.org/source/ ./config    make  make install 通过命令openssl version或者openssl ...