chart.js的中文文档:http://www.bootcss.com/p/chart.js/docs/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8"/>
<title>环形仪表盘样式</title>
<!--注意:如果要创建图表,必须要引入chart.js这个js文件-->
<script src="/chartjs/Chart.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no">-->
</head>
<body>
<div class="container">
<!--创建一个环形视图-->
<!--注意:canvas这个标签在H5中增加了一些属性-->
<canvas id="circleCanvas" width=300 height=200></canvas>
</div>
<script>
//获取图形标签对象
var circle = document.getElementById("circleCanvas");
//获取上下文镜像环境,注意:参数必须要写成2d且必须要写
var cxt = circle.getContext("2d");
//设置环形仪表盘的每个部分的值
var data = [
{
value: 120,
color: "red"
},
{
value: 120,
color: "blue"
},
{
value: 120,
color: "green"
}];
//创建动态仪表盘
var myCircle = new Chart(cxt).Doughnut(data);
</script>
</body>
</html>