Rumah > hujung hadapan web > tutorial js > Bermula dengan Chart.js: Pengenalan

Bermula dengan Chart.js: Pengenalan

Lisa Kudrow
Lepaskan: 2025-03-16 11:12:13
asal
575 orang telah melayarinya

Bermula dengan Chart.js: Pengenalan

Data mentah, sama ada dibentangkan sebagai teks atau jadual, boleh menjadi sukar untuk dicerna. Chart.js menawarkan penyelesaian yang menarik dengan menggambarkan data, menjadikannya lebih mudah untuk memahami maklumat yang kompleks.

Pertimbangkan jadual ini menunjukkan sepuluh negara yang paling ramai penduduk di dunia: (Contoh jadual yang ditinggalkan untuk keringkasan, kerana ia tidak berkaitan langsung dengan fungsi carta.js yang dijelaskan).

Untuk menggunakan Chart.js, mulakan dengan memasangnya:

 NPM Pemasangan Chart.js - -Save
Salin selepas log masuk

Walaupun carta.js sebelum ini dibundel momen.js, ini tidak lagi berlaku. Untuk carta skala masa, anda memerlukan penyesuai tarikh (seperti tarikh-FNS) dan perpustakaan yang sepadan. Tarikh-FNS adalah pilihan ringan untuk aplikasi yang lebih mudah. Contoh ini menggunakan tarikh-FNS dan menyesuaikan fon legenda.

 var barchart = carta baru (PopCanvas, {
    Jenis: 'Bar',
    data: data,
    Pilihan: {
        Plugin: {
          legenda: {
            Paparan: Benar,
            Kedudukan: "Bawah",
            Label: {
              BoxWidth: 50,
              Warna: "Hitam",
              font: {
                Saiz: 24,
                Berat: "berani"
              }
            }
          }
        }
    }
}); 
Salin selepas log masuk

Chart.js membolehkan kawalan berbutir ke atas petua. Chart.defaults.plugins.tooltip Menetapkan Gaya Tooltip Global, manakala pilihan carta individu menawarkan penyesuaian selanjutnya. Contoh ini menunjukkan fon penyesuaian, padding, saiz anak panah, dan latar belakang.

 Pilihan: {
    Plugin: {
      legenda: {
        Paparan: Benar,
        Kedudukan: "Bawah",
        Label: {
          BoxWidth: 50,
          Warna: "Hitam",
          font: {
            Saiz: 24,
            Berat: "berani"
          }
        }
      },
      Tooltip: {
        Cornerradius: 0,
        CARETSIZE: 0,
        Padding: 10,
        Latar Belakang: 'Hitam',
        BorderColor: "Grey",
        BorderWidth: 5,
        Titlemarginbottom: 4,
        TitleFont: {
          "Berat": "berani",
          "Saiz": 22
        }
      }
    }
}
Salin selepas log masuk

Menetapkan caretSize ke 0 menyembunyikan anak panah tooltip. Demo berikut mempamerkan alat -alat yang disesuaikan ini:

Kesimpulan:

Pengenalan ini kepada carta.js menunjukkan penciptaan dan penyesuaian carta bar. Pilihan konfigurasi yang ditunjukkan boleh digunakan untuk pelbagai jenis carta. Tutorial masa depan akan menyelidiki lebih mendalam ke dalam carta baris dan bar. Chart.js adalah alat yang berkuasa untuk visualisasi data dalam pembangunan web JavaScript. (Nota: sumber data penduduk yang disebut).

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan