Tutorial zur Verwendung von Bootstrap-Chart-Komponenten_Javascript-Kenntnisse

Bootstrap ist ein Front-End-Toolkit, das von den ehemaligen Twitter-Designern Mark Otto und Jacob Thornton entwickelt wurde und elegante HTML- und CSS-Spezifikationen bereitstellt. Bootstrap ist nicht nur ein Framework, sondern es ändert die Spielregeln. Das Framework erleichtert das Design und die Entwicklung vieler Anwendungen und Websites erheblich und macht eine große Anzahl von HTML-Frameworks in Produkten populär.

Die Diagrammkomponente Chart.js ist eine der benutzerfreundlicheren Komponenten von Bootstrap. Sie ähnelt Highchart, einer kostenpflichtigen Komponente. In Bezug auf die Wirkung gibt es immer noch einen kleinen Unterschied zwischen kostenlos und kostenpflichtig Produkte, aber die Funktionalität entspricht nahezu den Anforderungen unseres Projekts. Das folgende JS-Skript wurde hauptsächlich geschrieben, um die Konfiguration eines Diagramms zu erleichtern

/**
* 获取一个新的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;
}

Aufrufmethode:

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

Angezeigter Effekt:

Hinweis: Zur Verwendung des obigen Codes muss auf das Diagramm verwiesen werden. js,

Chart Chinesische Website und Dokumentation:

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

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

Chart Englische Website und Dokumentation:

www.chartjs.org

www.chartjs.org/docs

Das Obige ist der Inhalt des Tutorials zur Verwendung von Bootstrap-Chart-Komponenten. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).