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

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"
              }
            }
          }
        }
    }
}); 

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
        }
      }
    }
}

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!