Pengenalan kepada Chart.js 2.0

Artikel ini adalah sebahagian daripada Anthology

Modern JavaScript . Untuk panduan komprehensif untuk JavaScript moden, terokai premium SitePoint dan muat turun salinan anda.

Peer dikaji semula oleh Tim Severien dan Simon Codrington. Terima kasih kepada semua pengulas rakan sebaya SitePoint!

Laman web data-berat menuntut visualisasi data yang berkesan. Nombor mentah sukar bagi manusia untuk memahami; Carta dan graf menawarkan alternatif intuitif, boleh diakses, walaupun untuk penceramah bukan bahasa Inggeris. Visual yang jelas meningkatkan pemahaman dan rayuan laman web.

Tutorial ini memperkenalkan Chart.js, perpustakaan carta JavaScript. Melalui enam contoh, kami akan menunjukkan penggunaan dan konfigurasinya.

Ciri -ciri utama Chart.js 2.0:

perpustakaan JavaScript yang serba boleh dan mesra pengguna untuk penciptaan carta yang pelbagai.

• pemasangan mudah dan lengkung pembelajaran cepat.
• menyokong pelbagai jenis carta: garis, bar, radar, kawasan kutub, pai, dan donat. Jenis carta mudah diubah melalui harta
.
• type Ciri -ciri yang dipertingkatkan: Responsif mudah alih dan tajuk bersepadu.
• interaktiviti yang disesuaikan (mis., Menukar dataset melalui klik legenda).
• pilihan penyesuaian yang luas untuk penampilan (warna, tooltip, animasi).

mengapa carta.js?

Chart.js mengimbangi kemudahan penggunaan dengan penyesuaian yang kuat. Ia mengelakkan lengkung pembelajaran yang curam dari perpustakaan yang lebih kompleks sambil menawarkan fleksibiliti yang mencukupi. Lapan jenis carta meliputi kebanyakan keperluan visualisasi. Komuniti sumber terbuka yang aktif memastikan penyelenggaraan berkualiti tinggi. Versi 2.0 memperkenalkan penambahbaikan sintaks yang ketara dan sokongan mudah alih. Tutorial ini menggunakan Chart.js 2.0. Satu bahagian pada peralihan 1.0 hingga 2.0 dimasukkan.

Memasang Chart.js:

Chart.js mengutamakan kesederhanaan. Kaedah pemasangan yang paling mudah adalah melalui CDN:

anda juga memerlukan elemen

<🎜>

:

<canvas></canvas>

Sebagai alternatif, gunakan pengurus pakej (lihat Panduan Bermula Untuk Butiran).

<canvas id="myChart"></canvas>

mari kita meneroka keupayaan carta.js.

carta baris:

carta garis minimum ini menunjukkan struktur teras Chart.js:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.4)"
    }, {
      label: 'oranges',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});

Lihat CODEPEN CONTOH

Penjelasan:

: Mendapat konteks rendering 2D
• . ctx <canvas></canvas>
: Mewujudkan objek carta.
• Menentukan jenis carta; new Chart(ctx, { ... }) memegang data carta. Indeks Array Tentukan kedudukan graf. type data

Petua Pro:

Mengklik Legends Toggles dataset. Ini terpakai kepada semua jenis carta.

carta bar:

hanya tukar type: 'line' ke type: 'bar' dalam contoh sebelumnya.

Lihat CODEPEN CONTOH

Carta radar:

Tukar type ke 'radar'. Laraskan backgroundColor dan borderColor untuk dibaca yang lebih baik dengan data tumpang tindih.

Lihat CODEPEN CONTOH

Carta Polar:

Tukar type ke 'polarArea'. Carta kutub menggambarkan dataset tunggal.

Lihat CODEPEN CONTOH

carta pai dan donat:

Tukar type ke 'pie' atau 'doughnut'. Carta donat Gunakan cutoutPercentage untuk mengawal saiz lubang.

Lihat contoh codepen (pie) Lihat Contoh Codepen (Donut)

CONFIGURATION CHART.JS (): options

harta membolehkan penyesuaian yang luas:

options

tajuk:
• Tambah tajuk menggunakan . options: { title: { display: true, text: 'My Chart' } }
• : mengawal saiz lubang carta donat (0-50). cutoutPercentage
carta bar yang disusun:
• Gunakan untuk bar yang disusun. options: { scales: { yAxes: [{ stacked: true }] } }

Pengendalian Acara:

Sesuaikan legenda Legend Click Behavior:

Contohnya: Kemas Kini Keterangan Dinamik:

<🎜>

Lihat CODEPEN Contoh Contoh ini mengemas kini kapsyen berdasarkan klik legenda.

Chart.js 2.0 vs 1.0: Perbezaan utama:

Pengisytiharan carta:

2.0 menggunakan satu

panggilan dengan

,

, dan
• . 1.0 Menggunakan fungsi chaining. new Chart() Sokongan mudah alih: type 2.0 Termasuk sokongan mudah alih asli. data options
tajuk bersepadu:
• 2.0 menawarkan tajuk terbina dalam.
• Kesimpulan:
Chart.js sangat sesuai untuk prototaip carta pesat. Jenis carta yang pelbagai dan kemudahan penggunaan menjadikannya alat yang berharga bagi mana -mana pemaju web. Rujuk kepada dokumentasi Chart.js rasmi untuk butiran komprehensif.

(nota: ganti dengan pautan codepen sebenar untuk setiap jenis carta.)

Atas ialah kandungan terperinci Pengenalan kepada Chart.js 2.0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!