Gunakan pustaka carta Chart.js untuk mencipta petua forms_javascript responsif yang cantik

Asas untuk kemasukan

Chart.js ialah perpustakaan carta sumber terbuka berdasarkan HTML5, yang boleh melukis carta yang cantik dengan mudah dan ringkas.

Ciri utama termasuk:

1. Menyokong 6 jenis jadual yang berbeza: carta lengkung, carta bar, carta pai, carta radar, carta kawasan koordinat kutub dan carta cincin.
2. Dibangunkan berdasarkan HTML5 dan menyokong semua penyemak imbas (termasuk IE7/8).
3. Ia tidak bergantung pada mana-mana perpustakaan lain, hanya bersaiz 4.5k, dan boleh disesuaikan.

Chart.js ialah perpustakaan carta responsif, fleksibel dan ringan berdasarkan kanvas HTML5. Terdapat enam jenis carta berbeza yang tersedia dalam perpustakaan, masing-masing dengan pelbagai pilihan penyesuaian. Jika itu tidak mencukupi, anda juga boleh membuat jenis carta anda sendiri.

Kod untuk enam jenis carta Chart.js hanya berjumlah 11 kb dan dimampatkan dengan gzip Selain itu, perpustakaan adalah modular, jadi anda hanya boleh menggunakan jenis carta yang anda perlukan, dengan itu menjimatkan ruang. Di bawah ialah pautan cdnjs yang mengandungi perpustakaan.

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

Tetapan yang tersedia

Daripada petua alat kepada kesan animasi (Nota pembaca pruf: petua alat merujuk kepada petua alat yang muncul apabila tetikus bergerak ke atas elemen), Chart.js membenarkan anda menukar hampir semua ciri carta. Dalam bahagian ini, saya akan mengubah suai beberapa tetapan untuk menunjukkan cara Chart.js dicipta. Kami akan mulakan dengan kod HTML berikut:

XHTML

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

Untuk pembentangan pertama, saya akan membuat carta garisan. Terdapat beberapa pilihan asas yang perlu ditetapkan agar carta masuk akal. Carta garis memerlukan susunan label dan set data. Label akan muncul pada paksi X. Saya telah mengejek beberapa data untuk carta garisan, dipisahkan kepada tatasusunan, masing-masing dengan warna isian, garisan dan set titiknya sendiri.

Dalam contoh ini, saya menetapkan fillColor kepada lutsinar. Jika anda tidak menetapkan nilai fillColor, nilai itu akan lalai kepada hitam atau kelabu. Perkara yang sama berlaku untuk nilai lain. Warna ditakrifkan menggunakan format RGBA, RGB, hex atau HSL, sama seperti CSS.

JavaScript

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

Tetapkan pilihan global

Dalam kod saya telah menetapkan beberapa nilai global. animationSteps menentukan tempoh animasi. Seperti yang diperlukan, anda boleh mengubah suai lebih banyak pilihan, seperti scaleLineColor dan scaleIntegersOnly. Saya mengesyorkan menyemak imbas dokumentasi Chart.js untuk melihat pilihan lain yang tersedia dalam perpustakaan.

JavaScript

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

Tetapkan pilihan carta eksklusif

Selain pilihan global, terdapat beberapa pilihan konfigurasi untuk jenis carta tertentu. Dalam carta baris ini, saya akan menetapkan pilihan sedemikian, dengan harapan dapat memberi inspirasi kepada anda:

JavaScript

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

Carta yang dijana oleh Chart.js tidak responsif secara lalai. Menetapkan responsif kepada benar mengubahnya menjadi carta responsif. Jika anda perlu menjadikan setiap carta responsif, saya mengesyorkan menetapkan nilai global, seperti ini:

JavaScript

Chart.defaults.global.responsive = true;

Di bawah anda akan melihat contoh carta garis ini:

See the Pen Chart.js Responsive Line Chart Demo by SitePoint (@SitePoint) on CodePen.

Tambah dan alih keluar data dinamik

Kadangkala anda perlu memaparkan data yang berubah sepanjang masa. Pasaran saham adalah contoh tipikal bagi senario aplikasi ini. Dalam bahagian ini saya akan mencipta carta lajur dan menambah data sambil memadam data secara dinamik. Saya akan menggunakan beberapa data rawak dan membentangkan data sebagai carta lajur dalam contoh ini. Kebanyakan kod dalam contoh ini adalah serupa dengan contoh sebelumnya. Sebaik sahaja kami mempunyai HTML kami (sama seperti dalam contoh sebelumnya), kami boleh menambah JavaScript kami sendiri.

Mula-mula kita perlu menulis kod untuk mengisi carta dengan data dinamik. Saya menggunakan ungkapan fungsi untuk menjana nilai rawak dan kemudian memberikannya kepada dData pembolehubah. Nilai ini akan memberi kita data rawak apabila kita perlu mengubahnya. Seperti contoh sebelumnya, saya mencipta tatasusunan label dan set data, dan menetapkan fillColor sewenang-wenangnya.

JavaScript

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

Kini tiba masanya untuk menulis kod untuk mengalih keluar dan menambah bar pada carta kami. Pada mulanya kami memulakan nilai indeks kepada 11, dan saya menggunakan dua kaedah: removeData() dan addData(valuesArray,label). Memanggil kaedah removeData() instance mengalih keluar nilai pertama daripada semua set data dalam carta. Dalam contoh barChartDemo, nilai pertama set data dialih keluar. Memanggil addData() melepasi nilai tatasusunan bersama-sama dengan label, menambah nod data baharu pada penghujung carta. Coretan kod di bawah mengemas kini carta setiap 3 saat.

JavaScript

var index = 11;
var ctx = document.getElementById('canvas').getContext('2d');
var barDemo = new Chart(ctx).Bar(barData, {
 responsive: true
});
setInterval(function() {
 barDemo.removeData();
 barDemo.addData([dData()], 'dD ' + index);
 index++;
}, 3000);

Cara lain untuk mengemas kini nilai carta adalah dengan menetapkan nilai secara langsung. Dalam contoh di bawah, baris pertama menetapkan nilai bar kedua set data pertama kepada 60. Jika anda mengemas kini pada ketika ini, bar akan menghidupkan nilai semasanya kepada 60.

JavaScript

barDemo.datasets[0].bars[2].value = 60;
barDemo.update();

这里是柱形图的示例（由SitePoint在CodePen上创建）：

See the Pen Chart.js Responsive Bar Chart Demo by SitePoint (@SitePoint) on CodePen.

结论

这个教程覆盖了关于 Chart.js 的一些重要功能。第一个例子展示了一些全局设置的使用，同时，Chart.js也为每个图表类型提供了专属的自定义设置。如果当前可用的图表无法满足你的需求，你还可以创造自己的图表类型。我推荐你浏览文档，加深关于该库什么可以做，什么无法做的认识。