MohirDox

Ko'rinishi

Chart.js ​

Chart.js — ochiq manbali, bepul JavaScript kutubxonasi bo'lib, u HTML-ga asoslangan diagrammalar yaratishga mo'ljallangan. Bu JavaScript uchun eng sodda vizualizatsiya kutubxonalaridan biri hisoblanadi va quyidagi tayyor diagramma turlari bilan birga keladi:

  • Sochma nuqtali grafik (Scatter Plot)
  • Chiziqli grafik (Line Chart)
  • Ustunli diagramma (Bar Chart)
  • Doiraviy diagramma (Pie Chart)
  • Halqasimon diagramma (Donut Chart)
  • Pufakchali grafik (Bubble Chart)
  • Maydonli grafik (Area Chart)
  • Radar diagrammasi (Radar Chart)
  • Aralash diagramma (Mixed Chart)

Chart.js-dan qanday foydalanish kerak? ​

1. Kutubxonani taqdim etuvchi CDN (Content Delivery Network) havolasini qo'shing:

html
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0"></script>

2. HTML-ning diagramma chizilishini istagan joyingizga <canvas> elementini qo'shing:

html
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

Eslatma: Canvas elementi noyob ID-ga ega bo'lishi kerak.

Ustunli diagrammalar (Bar Charts) ​

Manba kodi ​

js
const xValues = ['Italiya', 'Fransiya', 'Ispaniya', 'AQSH', 'Argentina']
const yValues = [55, 49, 44, 24, 15]
const barColors = ['red', 'green', 'blue', 'orange', 'brown']

new Chart('myChart', {
  type: 'bar',
  data: {
    labels: xValues,
    datasets: [
      {
        backgroundColor: barColors,
        data: yValues
      }
    ]
  },
  options: {
    plugins: {
      legend: { display: false },
      title: {
        display: true,
        text: "Dunyo bo'ylab sharob ishlab chiqarish 2018"
      }
    }
  }
})

Ustunlarni gorizontal qilish uchun variantlar (options) ichiga indexAxis: 'y' ni qo'shing:

js
indexAxis: 'y',

Doiraviy diagrammalar (Pie Charts) ​

Misol ​

Faqat turni (type) "pie" ga o'zgartiring:

js
new Chart('myChart', {
  type: 'pie',
  data: {
    labels: xValues,
    datasets: [
      {
        backgroundColor: barColors,
        data: yValues
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: "Dunyo bo'ylab sharob ishlab chiqarish"
    }
  }
})

Halqasimon diagrammalar (Doughnut Charts) ​

Turni "pie" dan "doughnut" ga o'zgartiring:

js
type: 'doughnut'

Sochma nuqtali grafiklar (Scatter Plots) ​

Manba kodi ​

js
const xyValues = [
  {x: 50, y: 7},
  {x: 60, y: 8},
  {x: 70, y: 8},
  {x: 80, y: 9},
  {x: 90, y: 9},
  {x: 100, y: 9},
  {x: 110, y: 10},
  {x: 120, y: 11},
  {x: 130, y: 14},
  {x: 140, y: 14},
  {x: 150, y: 15}
];

new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgba(0,0,255,1)",
      data: xyValues
    }]
  },
  options: {...}
});

Chiziqli grafiklar (Line Graphs) ​

Manba kodi ​

js
const xValues = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
const yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: yValues
    }]
  },
  options: {...}
});

Agar borderColor-ni nolga (shaffof) o'rnatsangiz, chiziqli grafik sochma grafik sifatida ko'rinadi.

Bir nechta chiziqlar (Multiple Lines) ​

Manba kodi ​

js
new Chart('myChart', {
  type: 'line',
  data: {
    labels: xValues,
    datasets: [
      {
        data: [860, 1140, 1060, 1060, 1070, 1110, 1330, 2210, 7830, 2478],
        borderColor: 'red',
        fill: false
      },
      {
        data: [1600, 1700, 1700, 1900, 2000, 2700, 4000, 5000, 6000, 7000],
        borderColor: 'green',
        fill: false
      },
      {
        data: [300, 700, 2000, 5000, 6000, 4000, 2000, 1000, 200, 100],
        borderColor: 'blue',
        fill: false
      }
    ]
  },
  options: {
    legend: { display: false }
  }
})

Funksiya grafiklari ​

Matematik funksiyalarni chizish uchun quyidagi generator funksiyasidan foydalanish mumkin:

js
function generateData(value, i1, i2, step = 1) {
  for (let x = i1; x <= i2; x += step) {
    yValues.push(eval(value))
    xValues.push(x)
  }
}

Misol tariqasida y = sin(x) funksiyasini chizish:

js
generateData('Math.sin(x)', 0, 10, 0.5)