HTML कैनवस

HTML कैनवस बहुत ही उपयुक्त हैस्प्रेडट प्लॉट（स्प्रेडट प्लॉट）

HTML कैनवस बहुत ही उपयुक्त हैफोलिया ग्राफ（लाइन ग्राफ）

HTML कैनवस बहुत ही उपयुक्त है组合स्प्रेडट प्लॉट और फोलिया ग्राफ

स्प्रेडट प्लॉट

源代码

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();
}
// प्लॉट लाइन
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();
// लीनियों का फ़ंक्शन
function f(x) {
  return x * slope + intercept;
}

अपने आप प्रयास करें