HTML 画布
HTML Canvas 非常适合 散点图
HTML Canvas 非常适合 线图
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 =“红色”；
对于（让 i = 0; i < xArray.length-1; i++）{
让 x = xArray[i]*400/150;
让 y = yArray[i]*400/15;
ctx.beginPath()；
ctx.椭圆（x，y，2，3，0，0，Math.PI * 2）；
ctx.填充()；
}
亲自尝试 »
线图
源代码
让 xMax = canvas.height;
设斜率=1.2；
设截距=70；
// 绘制散点图
ctx.moveTo（0，拦截）；
ctx.lineTo（xMax，f（xMax））；
ctx.strokeStyle = “黑色”;
ctx. 描边();
// 线函数
函数 f(x) {
返回 x * 斜率 + 截距；
}
亲自尝试 »
综合
源代码
让 xMax = canvas.height;
让 yMax = canvas.width;
设斜率=1.2；
设截距=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 =“红色”；
对于（让 i = 0; i < xArray.length-1; i++）{
让 x = xArray[i]*400/150;
让 y = yArray[i]*400/15;
ctx.beginPath()；
ctx.椭圆（x，y，2，3，0，0，Math.PI * 2）；
ctx.填充()；
}
// 情节主线
ctx.moveTo（0，拦截）；
ctx.lineTo（xMax，f（xMax））；
ctx.strokeStyle = “黑色”;
ctx. 描边();
// 线函数
函数 f(x) {
返回 x * 斜率 + 截距；
}
亲自尝试 »
