<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還包換圓環,柱狀圖等等)