Chart.js 动态图表的使用

一、相关资料

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. 简介

2. 官网

二、示例代码

最新文章

热门文章