‎‎بوم اچ تي ام الJS HTML Canvas -‎

Previous >    <Next  

‎بومHTML براي ترسيم نمودارهاي نقطه اي‎,(Scatter Plots)‎ خطي ‎(Line Graphs)‎‎وتركيبي آن مناسب است .

‎‎نمودار نقطه ايScatter Plots -‎

‎‎مثال ـ نمونه نمودار نقطه اي

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];

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

--(go to editor for change code and run)

‎‎نمودار خطيLine Graphs

‎‎مثال ـ نمونه نمودار خطي

let xMax = canvas.height;
let slope = 1.2;
let intercept = 70;

// Plot Scatter
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();

// Line Function
function f(x) {
  return x * slope + intercept;
}

--(go to editor for change code and run)

‎‎نمودار تركيبي خطي ونقطه اي

‎‎مثال ـ نمونه نمودار تركيبي خطي و نقطه اي

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];

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

// Line Function
function f(x) {
  return x * slope + intercept;
}

--(go to editor for change code and run)


Previous >    <Next