一、相关资料

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. WebStorm添加多个项目到当前工程目录

    File-> Settings -> Directories -> Add Content Root,选择你要加入的Project 点击OK -> Apply -> OK ...

  2. 我希望早几年知道的5个Unix命令

    使用*nix系统已经有一段时间了.但还是有一些命令是被我一直忽略的,真希望我能早几年发现这些命令. 1. man ascii 这个命令会打印出八进制.十六进制和十进制的ASCII码表.难以置信我是一个 ...

  3. ASIHTTPRequest, request sent twice

    ´ve just started using ASIHTTPRequest for iOs and I have a small issue with it. All requests are sen ...

  4. CSS实现鼠标放图片上显示白色边框+文字描写叙述

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js aop 拦载实现

    var run = function(){ //is run } var aopBefore = function(){ //aopBefore } var tmpFn=run; run = func ...

  6. 【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结

    前言:这个项目是我们小组团体合作完成的学习项目,项目使用魅族GUI设计和图片素材,响应式重构Pro7官网的首页.子页.商城及购物车,并加入一些创新.我主要负责的是[画屏子页]的项目,这里作为温故知新, ...

  7. linux中脚本扑捉（trap）信号问题

    扑捉ctrl+c信号: #!/bin/bash trap ; function trap() { echo "You press Ctrl+C."; echo "Exit ...

  8. 习科小D整理找网站后台办法[科普]

    习科科普贴,如何找到网站的后台 作者:小Dの马甲来自:习科论坛 - Silic.Org - BlackBap.Org 1, 穷举猜解    现如今可以暴力猜解网站后台登陆地址的软件有很多,从最早的啊D ...

  9. Material Design Get Started

    使用Material Design设计应用: Take a look at the material design specification. Apply the material theme to ...

  10. IE67实现inline-block布局

    inline-block可以定义元素为行内块级元素,即既具有行内元素同占一行的特点,又具有块级元素的box模型.但是IE67和其他浏览器的支持差别比较大: 1.行内元素使用inline-block变成 ...