html5 canvas 實現簡單繪製折線圖
阿新 • • 發佈：2019-02-08
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>畫圖</title> <style> #divContainer{ margin-top: 20px; text-align: center; } #cv{ width: 300px; height: 200px; border-bottom: 2px solid #000; border-left: 2px solid #000; } </style> </head> <body> <div id="divContainer"> 鋁錠價走勢圖<br/> <canvas id="cv">你的裝置不支援圖表資料顯示</canvas> </div> <script> (function(){ window.onload = function(){ //資料來源 var dict = [ {x: "2015-04-24", y: 13400}, {x: "2015-04-25", y: 13380}, {x: "2015-04-26", y: 13370}, {x: "2015-04-27", y: 13370}, {x: "2015-04-28", y: 13380} ] //資料來源提取 var len = dict.length; var xArr = [], yArr = [], tmp_yArr = []; for(var i=0; i<len; i++){ xArr.push(i * 60); tmp_yArr.push(dict[i].y); } var tmp_minY = Math.min.apply(Math, tmp_yArr);//最小值 var tmp_maxY = Math.max.apply(Math, tmp_yArr);//最大值 if(tmp_maxY - tmp_minY <= 100){ for(var i=0; i<len; i++){ yArr.push(tmp_yArr[i] - tmp_minY + 50);//與最小的做比較 } } else{//如果相差太大會導致圖表不美觀 for(var i=0; i<len; i++){ yArr.push(tmp_yArr[i] / 500); } } var minY = Math.min.apply(Math, yArr); var maxY = Math.max.apply(Math, yArr); //canvas 準備 var canvas = document.getElementById("cv");//獲取canvas畫布 var ctx = canvas.getContext("2d"); //畫折線 for(var i=0 ;i<len; i++){ var x = xArr[i]; var y = maxY - yArr[i] + minY; if(i === 0){ ctx .moveTo(x, y); } else{ ctx .lineTo(x, y); } } ctx .stroke(); //畫點 for(var i=0; i<len; i++){ var x = xArr[i]; var y = maxY - yArr[i] + minY; var xMemo = dict[i].x; var yMemo = "¥" + dict[i].y; ctx.beginPath(); ctx.fillStyle = "#000"; ctx.arc(x, y, 2, 0, 2*Math.PI);//畫點 ctx.fill(); ctx.fillText(yMemo, x + 3, y - 10); ctx.fillText(xMemo, x + 3, canvas.height - 10, 40);//畫文字 } } })(); </script> </body> </html>