Bootstrap adalah toolkit front-end yang dikembangkan oleh mantan desainer Twitter Mark Otto dan Jacob Thornton, yang menyediakan spesifikasi HTML dan CSS yang elegan. Bootstrap bukan hanya kerangka kerja, tetapi juga mengubah seluruh permainan. Kerangka kerja ini membuat desain dan pengembangan banyak aplikasi dan situs web menjadi lebih mudah, dan mempopulerkan sejumlah besar kerangka kerja HTML menjadi produk.
Chart Component Chart.js adalah salah satu komponen bootstrap yang lebih berguna. Ini mirip dengan HighChart komponen berbayar. Dalam hal efek, masih ada sedikit perbedaan antara produk gratis dan berbayar, tetapi hampir dapat memenuhi kebutuhan proyek kami dalam hal fungsionalitas. Skrip JS berikut ini terutama ditulis untuk memfasilitasi konfigurasi bagan.
/*** Dapatkan item konfigurasi bagan baru* @param warna warna rgba* @param tipe grafik tipe: garis, bar, radar, polararea, pai, donat* @param judul menampilkan judul bagan* @param label label grafik umumnya* Konten yang Ditampilkan ketika mouse memindahkan ke titik data dari grafik* @param umumnya konten The Konten. @returns Return the configuration parameters of the chart*/function getNewConfig(color,type,title,label,categories,data){var background = color;var config = {type: type,options: {responsive: true,legend: {display: false,position:'bottom'},hover: {mode: 'label'},scales: {xAxes: [{display: true,scaleLabel: {display: false,labelString: 'Month'}}],yAxes: [{display: true,scaleLabel: {display: false,labelString: 'Value'}}]},title: {display: true,text: title}}};var dataset = {label: label,data: data,fill: false,borderDash: [, ],borderColor: background,backgroundColor : latar belakang, pointbordercolor: latar belakang, pointbackgroundColor: latar belakang, pointdorderwidth:}; var data = {label: kategori, dataset: [dataset]}; config.data = data; return config;}Metode Panggilan:
<canvas id = "chart_weixInmember"> </ canvas> var color = 'rgba (,,,.)'; var kategori = ["-", "-", "-", "-", "-"-","-"-"-"-", "-"-"]; var line,"-"-"-"-"-"-"-"-"]; var line, "-", "-"-"-"-" Pertumbuhan dalam beberapa hari terakhir ',' Anggota WeChat baru menambahkan hari itu ', kategori, data); var ctx = document.getElementById ("chart_weixInmember"). getContext ("d"); var weixinmembercountchart = bagan baru (ctx, config);Efek yang ditunjukkan:
Catatan: Gunakan kode di atas untuk merujuk ke chart.js,
Bagan situs web dan dokumentasi Cina:
http://www.bootcss.com/p/chart.js/
http://www.bootcss.com/p/chart.js/docs/
Bagan situs web dan dokumentasi bahasa Inggris:
www.chartjs.org
www.chartjs.org/docs