HTML ਕੈਨਵਾਸ

HTML ਕੈਂਵਾਸ ਬਹੁਤ ਲਾਜ਼ਮੀ ਹੈਸਕੈਟਰ ਪਲੋਟ（ਸਕੈਟਰ ਪਲੋਟਸ）。

HTML ਕੈਂਵਾਸ ਬਹੁਤ ਲਾਜ਼ਮੀ ਹੈਲਾਈਨ ਗਰਾਫ（ਲਾਈਨ ਗਰਾਫਸ）。

HTML ਕੈਂਵਾਸ ਬਹੁਤ ਲਾਜ਼ਮੀ ਹੈਮਿਸ਼ਰਣਸਕੈਟਰ ਪਲੋਟ ਅਤੇ ਲਾਈਨ ਗਰਾਫ

ਸਕੈਟਰ ਪਲੋਟ

ਸਰੋਤ ਕੋਡ

const ਐਕਸਏਰੇਅ = [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 ਐਕਸਮਾਕਸ = ਕੈਂਵਾਸ ਦੀ ਉੱਚਾਈ;
let ਢਾਲ = 1.2;
let ਅੰਤਰਾਂਕ = 70;
// ਸਪਰਾਈਟ ਗਰਾਫਿਕ
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();
// ਲੰਬਾਇਕ ਫੰਕਸ਼ਨ
function f(x) {
  return x * slope + intercept;
}

ਖੁਦ ਸਿਖਾਓ

ਮਿਸ਼ਰਣ

ਸਰੋਤ ਕੋਡ

let ਐਕਸਮਾਕਸ = ਕੈਂਵਾਸ ਦੀ ਉੱਚਾਈ;
let ਯਮਾਕਸ = ਕੈਂਵਾਸ ਦਾ ਵਿਸ਼ਾਲਤਾ;
let ਢਾਲ = 1.2;
let ਅੰਤਰਾਂਕ = 70;
const ਐਕਸਏਰੇਅ = [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 Line
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();
// ਲੰਬਾਇਕ ਫੰਕਸ਼ਨ
function f(x) {
  return x * slope + intercept;
}

ਖੁਦ ਸਿਖਾਓ