HTML Canvas

HTML Canvas ιδανικό για散点图（Διανύσματα).

HTML Canvas ιδανικό για折线图（Γραμμικά Γραφήματα）.

HTML Canvas ιδανικό για组合散点图和折线图。

散点图

源代码

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
επιλογή yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Διάγραμμα διασποράς
ctx.fillStyle = "red";
για (επιλογή i = 0; i < xArray.length-1; i++) {
  επιλογή x = xArray[i]*400/150;
  επιλογή 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();
// Λογιστική γραμμή
λειτουργία f(x) {
  επιστροφή 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];
επιλογή yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Διάγραμμα διασποράς
ctx.fillStyle = "red";
για (επιλογή i = 0; i < xArray.length-1; i++) {
  επιλογή x = xArray[i]*400/150;
  επιλογή y = yArray[i]*400/15;
  ctx.beginPath();
  ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}
// Γραφή γραμμής Plot
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();
// Λογιστική γραμμή
λειτουργία f(x) {
  επιστροφή x * slope + intercept;
}

Δοκιμάστε το προσωπικά