一、相關(guān)資料
1. 簡介
Chart.js 是一個(gè)基于 HTML5 的簡單的面向?qū)ο蟮膱D表庫嫂丙，支持包括 IE7/8 和所有現(xiàn)代瀏覽器瞻鹏。支持六種圖標(biāo)：曲線圖（Linecharts）贴汪、柱狀圖（Barcharts）拟枚、雷達(dá)圖（Radarcharts）、餅狀圖（Piecharts）吼渡、極坐標(biāo)區(qū)域圖（Polararea charts）以及圓環(huán)圖（Doughnutcharts）容为。并且?guī)в袆?dòng)畫效果（animated），支持 retina 屏寺酪。
2. 官網(wǎng)
官網(wǎng)：https://www.chartjs.org/
二坎背、示例代碼
本案例演示了最近 24 小時(shí)的 PV/UV 實(shí)時(shí)數(shù)據(jù)，在線 DEMO：
<!DOCTYPE html>
<html>
<head>
<title>Chart.js 動(dòng)態(tài)圖表的使用</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 實(shí)時(shí)統(tǒng)計(jì)'
},
}
};
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>
本文首發(fā)于馬燕龍個(gè)人博客寄雀，歡迎分享得滤，轉(zhuǎn)載請(qǐng)標(biāo)明出處。
馬燕龍個(gè)人博客：http://www.mayanlong.com
馬燕龍個(gè)人微博：http://weibo.com/imayanlong
馬燕龍Github主頁：https://github.com/yanlongma
