HTML Canvas Grafikasi

---

HTML Canvas quyidagi turdagi vizualizatsiyalar uchun juda qulay:

• Sochma nuqtali grafiklar (Scatter Plots)
• Chiziqli grafiklar (Line Graphs)
• Birlashtirilgan grafiklar (Scatter va Lines kombinatsiyasi)

---

Sochma nuqtali grafiklar (Scatter Plots)

Manba kodi

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]

// Nuqtalarni chizish (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()
}

---

Chiziqli grafiklar (Line Graphs)

Manba kodi

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

// Chiziqni chizish
ctx.moveTo(0, intercept)
ctx.lineTo(xMax, f(xMax))
ctx.strokeStyle = 'black'
ctx.stroke()

// Chiziq funksiyasi
function f(x) {
  return x * slope + intercept
}

---

Birlashtirilgan grafik (Combined)

Manba kodi

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]

// Nuqtalarni chizish
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()
}

// Chiziqni chizish
ctx.moveTo(0, intercept)
ctx.lineTo(xMax, f(xMax))
ctx.strokeStyle = 'black'
ctx.stroke()

// Chiziq funksiyasi
function f(x) {
  return x * slope + intercept
}