Canvas HTML

HTML Canvas is very suitable forScatter Plot（Scatter Plots）.

HTML Canvas is very suitable forLine Chart（Line Graphs）.

HTML Canvas is very suitable forCombinationScatter Plot and Line Chart.

Scatter Plot

Source Code

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];
// Scatter Plot
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();
}

Essayer vous-même

Line Chart

Source Code

let xMax = canvas.height;
let slope = 1.2;
let intercept = 70;
// Scatter Plot
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();
// Fonction de ligne
function f(x) {
  return x * pente + intercept;
}

Essayer vous-même

Combination

Source Code

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];
// Scatter Plot
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 Line
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();
// Fonction de ligne
function f(x) {
  return x * pente + intercept;
}

Essayer vous-même