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 élégantes HTML et CSS. Bootstrap n'est pas seulement un cadre, mais il change tout le jeu. Ce cadre facilite la conception et le développement de nombreuses applications et sites Web, et il populariser un grand nombre de cadres HTML en produits.
Graphique Composant chart.js est l'un des composants les plus utiles de Bootstrap. Il est similaire à un composant rémunéré HighChart. En termes d'effet, il y a encore une petite différence entre les produits gratuits et payants, mais il peut presque répondre aux besoins de notre projet en termes de fonctionnalité. Le script JS suivant est principalement écrit pour faciliter la configuration d'un graphique.
/*** Get a new chart configuration item * @param color rgba color * @param type Chart type: line,bar,radar,polarArea,pie,doughnut* @param title Display the title of the chart* @param label The label of the chart, the prompt text displayed when the mouse moves to a data point of the chart* @param categories Generally the content of the X-axis* @param data Generally the data of the Y-axis * @returns Renvoie les paramètres de configuration du graphique * / fonction getNewConfig (couleur, type, titre, étiquette, catégories, données) {var background = colore; var config = {type: type, options: {Réponse: true: légende: {affichage: false, position: 'bottom'}, hover: {mode: 'étiquette'}, échelles: {xaxes: [}: {mode: 'Label'}, Scales: {xaxes: [}: '' true, scaleLabel: {display: false, sabelstring: 'Month'}}], yaxes: [{affichage: true, scaleLabel: {affichage: false, libelstring: 'value'}}]}, title: {{true: text: title}}}; var dataset = {label: label: data: data: fall: false, borderdash: [], bordercol: data: data: fall: false, borderdash: [],] Background, BackgroundColor: Background, PointborDerColor: Background, PointBackgroundColor: Background, PointborderWidth:}; var data = {étiquettes: catégories, ensembles de données: [ensemble de données]}; config.data = données; return config;}Méthode d'appel:
<canvas id = "chart_weixinmember"> </ canvas> var color = 'rgba (,,,.)'; var catégories = ["-", "-", "-", "-", "-", "-", "-", "-", "-", "-"]; var data = [,,,,,]; Croissance ces derniers jours, 'New WeChat Membres a ajouté ce jour-là, catégories, données); var ctx = document.getElementById ("chart_weixinmember"). getContext ("d"); var weixinmemberCountChart = new Chart (ctx, config);Effets montrés:
Remarque: utilisez le code ci-dessus pour désigner chart.js,
Chart Site Web chinois et documentation:
http://www.bootcss.com/p/chart.js/
http://www.bootcss.com/p/chart.js/docs/
Tableau du site Web et de la documentation en anglais:
www.chartjs.org
www.chartjs.org/docs