Maison interface Web js tutoriel Utilisation du composant Bootstrap Chart, compétences tutoriel_javascript

Utilisation du composant Bootstrap Chart, compétences tutoriel_javascript

May 16, 2016 pm 03:03 PM

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;
}
Copier après la connexion

Méthode d'appel :

<🎜. >

var color = &#39;rgba(,,,.)&#39;;
var categories = [&quot;--&quot;,&quot;--&quot;,&quot;--&quot;,&quot;--&quot;,&quot;--&quot;,&quot;--&quot;,&quot;--&quot;];
var data = [,,,,,,];
var config = getNewConfig(color,&#39;line&#39;,&#39;最近天微信会员增长情况&#39;,&#39;当天新增微信会员&#39;,categories,data);
var ctx = document.getElementById(&quot;chart_weixinmember&quot;).getContext(&quot;d&quot;);
var weixinMemberCountChart = new Chart(ctx, config);
Copier après la connexion

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


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment introduire le bootstrap dans Eclipse Comment introduire le bootstrap dans Eclipse Apr 05, 2024 am 02:30 AM

Comment introduire le bootstrap dans Eclipse

Comment introduire une idée dans bootstrap Comment introduire une idée dans bootstrap Apr 05, 2024 am 02:33 AM

Comment introduire une idée dans bootstrap

Comment lire les résultats du test d'effet de médiation bootstrap dans stata Comment lire les résultats du test d'effet de médiation bootstrap dans stata Apr 05, 2024 am 01:48 AM

Comment lire les résultats du test d'effet de médiation bootstrap dans stata

750 000 rounds de bataille en tête-à-tête entre grands modèles, GPT-4 a remporté le championnat et Llama 3 s'est classé cinquième 750 000 rounds de bataille en tête-à-tête entre grands modèles, GPT-4 a remporté le championnat et Llama 3 s'est classé cinquième Apr 23, 2024 pm 03:28 PM

750 000 rounds de bataille en tête-à-tête entre grands modèles, GPT-4 a remporté le championnat et Llama 3 s'est classé cinquième

Comment lire les résultats du test de médiation bootstrap Comment lire les résultats du test de médiation bootstrap Apr 05, 2024 am 03:30 AM

Comment lire les résultats du test de médiation bootstrap

Comment utiliser bootstrap pour tester l'effet de la médiation Comment utiliser bootstrap pour tester l'effet de la médiation Apr 05, 2024 am 03:57 AM

Comment utiliser bootstrap pour tester l'effet de la médiation

Quelle est la différence entre bootstrap et springboot Quelle est la différence entre bootstrap et springboot Apr 05, 2024 am 04:00 AM

Quelle est la différence entre bootstrap et springboot

Comment exporter les résultats de la commande stata de l'effet de médiation du test d'amorçage Comment exporter les résultats de la commande stata de l'effet de médiation du test d'amorçage Apr 05, 2024 am 03:39 AM

Comment exporter les résultats de la commande stata de l'effet de médiation du test d'amorçage

See all articles