Utilisation du composant Bootstrap Chart, compétences tutoriel_javascript

Bootstrap est une boîte à outils frontale développée par les anciens concepteurs de Twitter Mark Otto et Jacob Thornton, qui fournit des spécifications HTML et CSS élégantes. Bootstrap n'est pas seulement un framework, mais il change plutôt les règles du jeu. Le framework facilite grandement la conception et le développement de nombreuses applications et sites Web et popularise un grand nombre de frameworks HTML en produits.

Le composant graphique Chart.js est l'un des composants les plus faciles à utiliser de Bootstrap. Il est similaire à highchart, un composant payant, en termes d'effet, il y a quand même une petite différence entre gratuit et payant. produits, mais la fonctionnalité est presque la même pour répondre aux besoins de notre projet. Le script JS suivant est principalement écrit pour faciliter la configuration d'un graphique

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

Méthode d'appel :

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

Effet affiché :

Remarque : le graphique doit être référencé pour utiliser le code ci-dessus. js,

Site Web et documentation de Chart chinois :

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

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

Site Web et documentation de Chart en anglais :

www.chartjs.org

www.chartjs.org/docs

Ce qui précède est le contenu des compétences tutoriel_javascript d'utilisation du composant Bootstrap Chart. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !