Carta mewah, responsif dengan carta.js

Data adalah di sekeliling kita. Walaupun enjin carian dan aplikasi lain berfungsi paling optimum dengan perwakilan data berasaskan teks, orang mencari data yang diwakili secara visual untuk mudah difahami. Awal tahun ini, SitePoint menerbitkan artikel Aurelio yang menyampaikan pengenalan kepada Chart.js. Tutorial ini akan memberikan rekap cepat pengenalan yang diikuti oleh pandangan yang lebih mendalam ke dalam ciri -ciri carta.js.

Kunci Takeaways

Chart.js adalah perpustakaan carta responsif berasaskan kanvas HTML5 yang menyokong enam jenis carta yang berbeza, masing-masing dengan pelbagai pilihan penyesuaian. Ia adalah modular, yang membolehkan pemaju hanya memasukkan jenis carta yang mereka perlukan, menyimpan saiz fail minimum.
Perpustakaan membolehkan penyesuaian carta yang luas, termasuk tip alat, animasi, dan juga penciptaan jenis carta tersuai. Ini termasuk kedua-dua tetapan global dan pilihan spesifik carta, dengan keupayaan untuk membuat carta responsif dengan menetapkan pilihan konfigurasi responsif kepada Benar.
Chart.js juga menyokong penambahan dinamik dan penyingkiran data, menjadikannya sesuai untuk situasi di mana data berubah dari masa ke masa, seperti perwakilan pasaran saham. Ini dapat dicapai melalui kaedah seperti reveRedata () dan addData (valueArray, label), atau dengan secara langsung menetapkan nilai dalam carta.

Bermula

Chart.js adalah perpustakaan carta responsif, fleksibel, ringan, ringan. Perpustakaan menyokong enam jenis carta yang berbeza, setiap jenis carta ini datang dengan beban pilihan penyesuaian. Jika itu tidak mencukupi, anda juga mempunyai keupayaan untuk membuat jenis carta tersuai anda sendiri.

Semua enam jenis carta teras dalam carta.js hanya 11kb minified dan gzip'd dan perpustakaan adalah modular supaya anda dapat mengurangkan saiz permintaan untuk fail hanya termasuk jenis carta yang anda perlukan. Berikut adalah pautan CDNJS untuk memasukkannya:

<span><script></script></span>

Pilihan Konfigurasi Tersedia

carta.js membolehkan anda menukar hampir setiap aspek carta anda - dari petua alat ke animasi. Dalam seksyen ini saya akan mengubah suai beberapa tetapan untuk menunjukkan apa yang boleh dibuat oleh Chart.js. Berikut adalah HTML yang akan kita mulakan dengan:

<span><canvas id="canvas"></canvas></span>

Untuk demonstrasi pertama, saya akan membuat carta baris. Terdapat beberapa pilihan asas yang perlu anda tetapkan untuk carta untuk masuk akal. Carta garis menjangkakan pelbagai label dan dataset. Label muncul pada paksi x. Saya telah mengisi carta garis dengan beberapa data dummy. Data dipecah menjadi pelbagai set data. Setiap set data mempunyai warna untuk mengisi, garis, dan mata.

Saya telah menetapkan fillColor kepada telus dalam kes ini. Jika anda tidak menetapkan nilai fillColor, ia akan ditetapkan kepada hitam atau kelabu sebaliknya. Sama berlaku untuk nilai lain. Warna -warna yang ditakrifkan menggunakan format RGBA, RGB, HEX, atau HSL, sama dengan CSS.

<span><script src="https://img.php.cn/upload/article/000/000/000/174049952240765.jpg"></script></span>

Menetapkan Pilihan Global

Saya telah memasukkan kod yang menetapkan beberapa nilai global. AnimationSteps menentukan tempoh animasi. Terdapat banyak lagi pilihan yang boleh anda ubah mengikut keperluan anda, seperti Scalelinecolor dan ScaleIntegersonly. Saya cadangkan anda melalui dokumentasi Chart.js untuk melihat apa lagi yang ditawarkan oleh perpustakaan ini.

<span><canvas id="canvas"></canvas></span>

Menetapkan pilihan spesifik carta

Selain pilihan global, terdapat pilihan konfigurasi yang tersedia untuk jenis carta individu. Saya akan menetapkan beberapa pilihan ini dalam carta baris ini untuk memberi anda idea:

<span>var lineData = {
</span>  <span>labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 
</span>           <span>'Data 5', 'Data 6', 'Data 7'],
</span>  <span>datasets: [{
</span>    <span>fillColor: 'rgba(0,0,0,0)',
</span>    <span>strokeColor: 'rgba(220,180,0,1)',
</span>    <span>pointColor: 'rgba(220,180,0,1)',
</span>    <span>data: [20, 30, 80, 20, 40, 10, 60]
</span>  <span>}, {
</span>    <span>fillColor: 'rgba(0,0,0,0)',
</span>    <span>strokeColor: 'rgba(151,187,205,1)',
</span>    <span>pointColor: 'rgba(151,187,205,1)',
</span>    <span>data: [60, 10, 40, 30, 80, 30, 20]
</span>  <span>}]
</span><span>}</span>

Carta yang dihasilkan oleh carta.js tidak responsif secara lalai. Menetapkan responsif kepada benar (seperti yang dilakukan di atas) menjadikannya responsif. Sekiranya anda perlu membuat setiap carta responsif, saya cadangkan anda menetapkan ini secara global, seperti ini:

<span>Chart.defaults.global = {
</span>  <span>animationSteps : 50,
</span>  <span>tooltipYPadding : 16,
</span>  <span>tooltipCornerRadius : 0,
</span>  <span>tooltipTitleFontStyle : 'normal',
</span>  <span>tooltipFillColor : 'rgba(0,160,0,0.8)',
</span>  <span>animationEasing : 'easeOutBounce',
</span>  <span>scaleLineColor : 'black',
</span>  <span>scaleFontSize : 16
</span><span>}</span>

di bawah anda dapat melihat demo carta baris:

lihat demo carta line pen carta.js oleh sitepoint (@sitePoint) pada codepen.

Menambah dan mengeluarkan data secara dinamik

Kadang -kadang anda perlu memaparkan data yang berubah dari masa ke masa. Contoh klasik senario ini adalah pasaran saham. Dalam bahagian ini saya akan membuat carta bar dan secara dinamik mengeluarkan serta menambah data kepadanya. Saya akan menggunakan beberapa data rawak dan saya telah memutuskan untuk mewakili data dengan carta bar dalam kes ini. Kebanyakan kod dalam contoh ini akan sama dengan contoh sebelumnya. Sebaik sahaja kita mempunyai HTML kita (sama seperti contoh sebelumnya), kita boleh menambah JavaScript kita.

Pertama kami akan menulis kod untuk mengisi carta kami dengan data dummy. Saya menggunakan ungkapan fungsi untuk menjana nilai rawak dan kemudian menyimpannya dalam DData yang berubah -ubah. Nilai -nilai ini kemudiannya digunakan untuk memberi kita data rawak apabila keperluan timbul. Seperti dalam contoh terdahulu, saya membuat pelbagai label dan dataset dan menetapkan fillcolor sewenang -wenangnya.

<span>var ctx = document.getElementById('canvas').getContext('2d');
</span><span>var lineDemo = new Chart(ctx).<span>Line</span>(lineData, {
</span>  <span>responsive: true,
</span>  <span>pointDotRadius: 10,
</span>  <span>bezierCurve: false,
</span>  <span>scaleShowVerticalLines: false,
</span>  <span>scaleGridLineColor: 'black'
</span><span>});</span>

Sekarang sudah tiba masanya untuk menulis kod yang membuang dan menambah bar ke carta kami. Saya mulakan dengan memulakan pembolehubah indeks pada nilai 11. Saya menggunakan dua kaedah: Removedata () dan AddData (ValuesArray, Label). Memanggil RemoveData () pada contoh carta menghilangkan nilai pertama untuk semua dataset pada carta tertentu. Dalam kes BarchartDemo, nilai pertama dataset dikeluarkan. Memanggil AddData () melewati pelbagai nilai bersama dengan label menambah titik data baru pada akhir carta. Coretan kod di bawah mengemas kini carta setiap 3 saat.

<span>Chart.defaults.global.responsive = true;</span>

Kaedah alternatif untuk mengemas kini nilai dalam carta adalah untuk menetapkan nilai secara langsung. Dalam contoh di bawah, baris pertama menetapkan nilai bar kedua dataset pertama hingga 60. Jika anda memanggil kemas kini pada ketika ini, bar akan menghidupkan dari nilai semasa ke 60.

<span>var dData = function() {
</span>  <span>return Math.round(Math.random() * 90) + 10;
</span><span>};
</span>
<span>var barData = {
</span>  <span>labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4',
</span>           <span>'dD 5', 'dD 6', 'dD 7', 'dD 8'],
</span>  <span>datasets: [{
</span>    <span>fillColor: 'rgba(0,60,100,1)',
</span>    <span>strokeColor: 'black',
</span>    <span>data: [dData(), dData(), dData(), dData(),
</span>           <span>dData(), dData(), dData(), dData()]
</span>  <span>}]
</span><span>}</span>

Dan inilah demo carta bar:

Lihat Demo Car Chart.js Responsive Bar Demo oleh SitePoint (@SitePoint) pada codepen.

Kesimpulan

Tutorial ini meliputi beberapa ciri penting Chart.js. Contoh pertama menunjukkan penggunaan beberapa tetapan global. Walau bagaimanapun, Chart.js juga menyediakan pilihan penyesuaian khusus untuk jenis carta. Perpustakaan membolehkan anda membuat jenis carta anda sendiri jika carta sudah tersedia tidak memenuhi keperluan anda. Saya cadangkan anda untuk melalui dokumentasi supaya anda dapat memahami apa yang anda boleh dan tidak boleh lakukan dengan perpustakaan ini.

Soalan Lazim (Soalan Lazim) mengenai carta responsif mewah dengan carta.js

bagaimana saya boleh membuat carta carta.js saya responsif sepenuhnya?

Membuat carta carta.js anda responsif sepenuhnya melibatkan menetapkan pilihan konfigurasi responsif untuk benar. Ini membolehkan carta untuk mengubah saiznya apabila saiz tetingkap berubah. Anda boleh melakukan ini dengan menambahkan kod berikut ke konfigurasi carta anda:

var myChart = carta baru (ctx, { type: 'bar',
data: data,
pilihan: {
responsif: true
} ); Reka bentuk.
Kenapa carta carta.js saya tidak mengubah saiz dengan betul?

Jika carta carta.js anda tidak mengubah saiz dengan betul, ia mungkin disebabkan oleh beberapa sebab. Satu isu biasa ialah elemen kanvas yang mengandungi carta tidak diubahsuai dengan betul. Pastikan elemen kanvas mempunyai kedudukan relatif dan lebar dan ketinggian 100%. Isu lain ialah pilihan responsif dalam konfigurasi carta tidak ditetapkan kepada benar. Semak konfigurasi carta anda untuk memastikan pilihan responsif ditetapkan dengan betul.

Bagaimana saya boleh menyesuaikan penampilan carta carta.js saya? penampilan carta anda. Anda boleh menyesuaikan warna, label, petua, dan banyak lagi. Contohnya, untuk menyesuaikan warna bar dalam carta bar, anda boleh menggunakan kod berikut:

var myChart = carta baru (ctx, { type: 'bar',

data : {

datasets: [{

latar belakangColor: 'rgba (75, 192, 192, 0.2)'

}]

}
});
Kod ini akan menetapkan warna latar belakang bar ke warna biru muda. Anda boleh menyesuaikan banyak aspek lain dari penampilan carta menggunakan pilihan yang sama.

Bagaimana saya boleh menambah tooltip ke carta carta.js saya?

Anda boleh menyesuaikan penampilan dan tingkah laku tooltips menggunakan pilihan Konfigurasi ToolTips. Sebagai contoh, untuk menukar warna latar belakang tooltips, anda boleh menggunakan kod berikut:

var myChart = carta baru (ctx, {
type: 'bar',
data: data,
opsyen: {
tooltips: { latar belakangColor: 'rgba (0, 0, 0, 0.8)' }
}
});
Kod ini akan menetapkan warna latar belakang tooltips ke warna hitam separa telus. Anda boleh menyesuaikan banyak aspek petua lain menggunakan pilihan yang serupa.

Bagaimana saya boleh menambah animasi ke carta carta.js saya? . Anda boleh mengawal tempoh, fungsi pelonggaran, dan aspek animasi lain menggunakan pilihan Konfigurasi Animasi. Sebagai contoh, untuk menghidupkan carta dengan tempoh 2000 milisaat dan fungsi pelonggaran 'EaseOutBounce', anda boleh menggunakan kod berikut:

var myChart = carta baru (ctx, {

jenis: ' bar ', data: data,

opsyen: {

animasi: { duration: 2000,
pelonggaran: 'Easeoutbounce'
}
}); Kod ini akan menghidupkan carta dengan kesan melantun selama tempoh 2 saat. Anda boleh menyesuaikan banyak aspek animasi lain menggunakan pilihan yang serupa.

Atas ialah kandungan terperinci Carta mewah, responsif dengan carta.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!