<canvas id="a_canvas" width="850" height="450" ></canvas>
<script>
var a_canvas;
var a_context;
var b_canvas;
var b_context;
window.onload = function() {
a_canvas = document.getElementById('a_canvas');
if(a_canvas && a_canvas.getContext) {
a_context = a_canvas.getContext('2d');
}
b_canvas = document.getElementById('b_canvas');
if(b_canvas && b_canvas.getContext) {
b_context = b_canvas.getContext('2d');
}
a_centerX = a_canvas.width / 3, //Canvas三分之一x轴坐标
a_centerY = a_canvas.height / 2, //Canvas中心点y轴坐标
rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
whiteCircle(a_context, a_centerX, a_centerY);
text(a_context, a_centerX, a_centerY);
list(a_context, a_centerX, a_centerY);
var white_data = [17, 3, 15, 5, 14, 3, 27, 5];
var yellow_data = [10, 13, 5, 5, 4, 13, 27, 15];
var white="white";
var yellow="yellow";
lineChart(b_context,b_canvas,white_data,white);//context,canvas,data,color
lineChart(b_context,b_canvas,yellow_data,yellow);
}
//绘制内圈
function whiteCircle(context, centerX, centerY) {
context.save();
context.beginPath();
context.radius = 80;
context.lineWidth = 80;
context.strokeStyle = "#81EF7D";
context.arc(centerX, centerY, 170, 0, Math.PI * 2, false);
context.stroke();
context.closePath();
context.restore();
}
//文字绘制
function text(context, centerX, centerY) {
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.strokeStyle = "#81EF7D"; //设置描边样式
context.fillStyle = "#1DABE2";
context.font = "80px sans-serif"; //设置字体大小和字体
//绘制字体，并且指定位置
context.fillText("0", centerX - 20, centerY - 10);
context.font = "40px sans-serif";
context.fillText("延误总数", centerX - 75, centerY + 40);
context.stroke(); //执行绘制
context.restore();
}
function list(context, centerX, centerY) {
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.beginPath();
context.arc(centerX * 3 * 0.9 - 20, centerY * 2 * 0.9 - 10, 10, 0, 360, false);
context.fillStyle = "#81EF7D";
context.fill();
context.closePath();
context.strokeStyle = "#81EF7D"; //设置描边样式
context.fillStyle = "black";
context.font = "30px sans-serif";
context.fillText("其他", centerX * 3 * 0.9, centerY * 2 * 0.9);
context.stroke(); //执行绘制
context.restore();
}
function lineChart(context,canvas,data,color) {
// 绘制背景
var gradient = context.createLinearGradient(0, 0, 0, 300);
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
// 描绘边框
var grid_cols = data.length + 1;
var grid_rows = 8;
var cell_height = canvas.height / grid_rows;
var cell_width = canvas.width / grid_cols;
context.lineWidth = 1;
context.strokeStyle = "#a0a0a0";
var max_v = 60;
for(var i = 0; i < data.length; i++) {
var d = 0;
if(data[i] < 0) {
d = d - data[i];
} else { d = data[i]; };
if(d > max_v) { max_v = d };
}
max_v = max_v * 1.0;
// 将数据换算为坐标
var points = [];
for(var i = 0; i < data.length; i++) {
var v = data[i];
var px = cell_width * (i + 1);
var py = canvas.height - canvas.height * (v / max_v);
points.push({ "x": px, "y": py });
}
// 绘制折现
context.beginPath();
context.moveTo(points[0].x, points[0].y);
for(var i = 1; i < points.length; i++) {
context.lineTo(points[i].x, points[i].y);
}
context.lineWidth = 4;
context.strokeStyle = color;
context.stroke();
//绘制坐标图形
for(var i in points) {
if(i < 19) {
var p = points[i];
context.beginPath();
context.lineWidth = 4;
context.radius = 4;
context.strokeStyle = "white";
context.fillStyle = color;
context.arc(p.x, p.y, 7, 0, Math.PI * 2, false);
context.stroke();
context.fill();
context.closePath();
} else {
}
}
}
</script>
三,Demo地址(该demo还包换圆环,柱状图等等)
转播
