Qrafik nə vaxt lazımdır

Cədvəldə 12 ay üçün 12 rəqəm var. Göz onları müqayisə etmir, qrafikdə isə trend bir baxışda görünür. Brauzerdə qrafik çəkməyin üç yolu var: <canvas>, SVG və ya hazır kitabxana. Əl ilə çəkmək mümkündür, amma oxlar, yazılar, tooltip, animasiya və resize çox kod tələb edir.

Bu dərsdə iki kitabxanaya baxırıq. Chart.js hazır qrafik növləri verir və konfiqurasiya ilə işləyir. D3 isə hazır qrafik vermir: miqyas, oxlar və data join kimi hissələr verir, qrafiki özünüz yığırsınız.

Chart.js konfiqurasiyası canvas üzərində qrafikə çevrilir
Chart.js konfiqurasiyası canvas üzərində qrafikə çevrilir

Chart.js: ilk qrafik

Qrafik <canvas> elementində çəkilir. Konfiqurasiya üç hissədən ibarətdir: type (qrafikin növü), data (labels və datasets) və options. Kitabxananı npm install chart.js ilə qurun.

html
<div style="position: relative; height: 320px">
  <canvas id="sales"></canvas>
</div>
javascript
import { Chart } from 'chart.js/auto';

const chart = new Chart(document.getElementById('sales'), {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{ label: 'Orders', data: [12, 19, 8, 15] }],
  },
  options: { responsive: true, maintainAspectRatio: false },
});

chart.js/auto bütün növləri və miqyasları qeyd edir, ona görə ilk dəfə ən rahatdır. Production-da bundle-ı kiçiltmək üçün yalnız lazım olanları Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend) kimi qoşun.

💡 Canvas-ı position: relative və hündürlüyü olan konteynerə qoyun. responsive: true olanda Chart.js ölçünü valideyn konteynerdən götürür.

⚠️ Canvas-ın ölçüsünü birbaşa CSS ilə verməyin: qrafik yenidən ölçüləndikdə bulanıq və ya səhv ölçülü ola bilər.

Dataset-lər və options

Hər dataset bir sıradır: label, data və görünüş sahələri (borderColor, backgroundColor, tension). Bir qrafikdə bir neçə dataset ola bilər, hətta bir dataset-in type-ı fərqli ola bilər (məsələn, sütun üstündə xətt).