


Utilisation du composant Bootstrap Chart, compétences tutoriel_javascript
May 16, 2016 pm 03:03 PMBootstrap 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);
http://www.bootcss.com/p/chart.js/
http://www.bootcss.com/p/chart.js/docs/

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

Comment introduire le bootstrap dans Eclipse

Comment introduire une idée dans bootstrap

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

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

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

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
