Canvas之画多个折线图

一说明:

使用html画多个折线图,效果图如下:

二,代码片段(完整的代码在文章的最后)

<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,colorlineChart(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还包换圆环,柱状图等等)

github地址:https://github.com/LuochuanAD/CanvasForHtml5