一、相关资料

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. 检查iOS app 是否升级为新版本

    之前我帮某公司做的一个iOS app,升级的时候发现闪退问题.后来检查是因为升级的时候数据库出现一点小问题导致对象为空. 下面这个代码可以检测程序是否更新了,从而进行相关处理: 1 2 3 4 5 6 ...

  2. RxJava Android（RxAndroid） 开发全家桶

    RxJava 在 Android 应用开发中越来越流行,但是由于其门槛稍高,初次使用不免遇到很多问题,例如在 RxJava 常见的错误用法 和 不该使用 RxJava 的一些情况 中所描述的情况.为了 ...

  3. weblogic多池与oracle集群RAC

    http://www.techpaste.com/2013/04/soa-infra-start-fails-weblogic-common-resourceexception-good-connec ...

  4. 推荐一个好的数据库工具Embarcadero DBArtisan

    最近的项目中用到了DB2数据库,由于DB2数据库客户端在操作操作和控制方面不是很方便,如存储过程的编写.后来我们在数据库的操作都转在DBArtisan上了,最新版好像是8.12.        下面介 ...

  5. 2017.2.12 开涛shiro教程-第八章-拦截器机制

    原博客地址:http://jinnianshilongnian.iteye.com/blog/2018398 根据下载的pdf学习. 1.拦截器介绍 下图是shiro拦截器的基础类图: 1.Namea ...

  6. TP如何进行批量查询

    public function getUserInfo($uid){     if(is_null($uid) || empty($uid)){return false;}     if(is_arr ...

  7. vuex Payload 荷载

    1.payload payload:有效载荷,即记录有效信息的部分. 通常在传输数据时,为了使数据传输更可靠,要把原始数据分批传输,并且在每一批数据的头和尾都加上一定的辅助信息,比如这一批数据量的大小 ...

  8. ushare编译之 ‘struct sockaddr_storage’ has no member named ‘s_addr’

    编译ushare的时候出现'struct sockaddr_storage' has no member named 's_addr' 这是使用libupnp1.6.19出现版本号不兼容的错误. 解决 ...

  9. C++一元多项式相加

    实验名称:一元多项式相加 // multiply.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream& ...

  10. js 解析json字符串

    server端返回的数据例如以下: {"list":[{"id":1,"name":"汉族"},{"id&qu ...