HTML Canvas
HTML Canvas 非常适合散点图(Scatter Plots)。
HTML Canvas 非常适合折线图(Line Graphs)。
HTML Canvas 非常适合组合散点图和折线图。
散点图
源代码
const xArray = [50,60,70,80,90,100,110,120,130,140,150];const yArray = [7,8,8,9,9,9,10,11,14,14,15];// 散点图ctx.fillStyle = "red";for (let i = 0; i < xArray.length-1; i++) { let x = xArray[i]*400/150; let y = yArray[i]*400/15; ctx.beginPath(); ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2); ctx.fill();}
折线图
源代码
let xMax = canvas.height;let slope = 1.2;let intercept = 70;// 散点图ctx.moveTo(0, intercept);ctx.lineTo(xMax, f(xMax));ctx.strokeStyle = "black";ctx.stroke();// 折线函数function f(x) { return x * slope + intercept;}
组合
源代码
let xMax = canvas.height;let yMax = canvas.width;let slope = 1.2;let intercept = 70;const xArray = [50,60,70,80,90,100,110,120,130,140,150];const yArray = [7,8,8,9,9,9,10,11,14,14,15];// 散点图ctx.fillStyle = "red";for (let i = 0; i < xArray.length-1; i++) { let x = xArray[i]*400/150; let y = yArray[i]*400/15; ctx.beginPath(); ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2); ctx.fill();}// Plot Linectx.moveTo(0, intercept);ctx.lineTo(xMax, f(xMax));ctx.strokeStyle = "black";ctx.stroke();// 折线函数function f(x) { return x * slope + intercept;}