## **使用示例**
> 参考文档：[Chart.js中文网]([http://chartjs.cn/](http://chartjs.cn/))
> 版本：2.8.0
> 代码案例来自：[https://blog.csdn.net/json\_vip/article/details/93320580](https://blog.csdn.net/json_vip/article/details/93320580)
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chart.js</title>
<script src="every_js/Require.js" type="text/javascript" charset="utf-8"></script>
<script src="every_js/Every.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<canvas id="chart"></canvas>
</body>
<script type="text/javascript">
var chart;
Every.use(['chart'],function(c){
chart = c;
renderChart();
});
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 实时统计'
},
}
};
function renderChart(){
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>
</html>
```
- 关于Every.js
- 如何使用
- 版本对应
- 全部模块
- jquery 瑞士军刀
- 模板引擎
- artTemplate.js 百度模板引擎
- doT.js 小而快的模板引擎
- mustache.js
- 图形 / 图像
- chart.js 基于 HTML5 的 JavaScript 图表库
- html2canvas 使用JavaScript截图
- d3.js 数据驱动文件
- 编码/加密
- md5.js 加密
- sha1.js 加密
- base64.js 加密解密
- 触摸/滑动/特效
- swiper5.js 强大的触摸屏插件
- WOW.js 让页面滚动更有趣
- 数据 / 存储 / 字符 / 数字
- clipboard 现代化的拷贝文字
- storage 浏览器存储
- localStorage
- sessionStorage
- underscore.js JavaScript 的实用工具
- store.js 跨浏览器的本地存储
- 时间 / 日期
- timeago.js 时间转换为几天前
- 其他插件
- zepto.js 小巧版的jquery