Kemahiran penggunaan komponen Carta Bootstrap tutorial_javascript

Bootstrap ialah kit alat hadapan yang dibangunkan oleh bekas pereka Twitter Mark Otto dan Jacob Thornton, yang menyediakan spesifikasi HTML dan CSS yang elegan. Bootstrap bukan sekadar rangka kerja, malah ia mengubah peraturan permainan. Rangka kerja ini menjadikan reka bentuk dan pembangunan banyak aplikasi dan tapak web lebih mudah, dan ia mempopularkan sejumlah besar rangka kerja HTML kepada produk.

Komponen carta Chart.js ialah salah satu komponen Bootstrap yang lebih mudah digunakan Ia serupa dengan highchart, komponen berbayar dari segi kesan, masih terdapat sedikit perbezaan antara percuma dan berbayar produk, tetapi fungsinya hampir sama memenuhi keperluan projek kami. Skrip JS berikut terutamanya ditulis untuk memudahkan konfigurasi carta

/**
* 获取一个新的chart配置项
* @param color rgba颜色
* @param type 图表类型:line,bar,radar,polarArea,pie,doughnut
* @param title 显示图表的标题
* @param label 图表的标签，鼠标移到图表某个数据点时显示的提示文字
* @param categories 一般是X轴的内容
* @param data 一般是Y轴的数据
* @returns 返回图表的配置参数
*/
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 : background,
pointBorderColor : background,
pointBackgroundColor : background,
pointBorderWidth : 
};
var data = {
labels:categories,
datasets: [dataset]
};
config.data = data;
return config;
}

Kaedah panggilan:

var color = 'rgba(,,,.)';
var categories = ["--","--","--","--","--","--","--"];
var data = [,,,,,,];
var config = getNewConfig(color,'line','最近天微信会员增长情况','当天新增微信会员',categories,data);
var ctx = document.getElementById("chart_weixinmember").getContext("d");
var weixinMemberCountChart = new Chart(ctx, config);

Kesan yang dipaparkan:

Nota: Carta perlu dirujuk untuk menggunakan kod di atas . js,

Carta laman web dan dokumentasi Cina:

http://www.bootcss.com/p/chart.js/

http://www.bootcss.com/p/chart.js/docs/

Carta laman web dan dokumentasi Bahasa Inggeris:

www.chartjs.org

www.chartjs.org/docs

Di atas adalah kandungan kemahiran penggunaan komponen Carta Bootstrap tutorial_javascript Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php.cn)!