Dans le secteur des statistiques et de l'analyse des données, les clients doivent parfois afficher des graphiques à barres, des diagrammes circulaires et des graphiques à courbes dans un seul graphique. Autrement dit, les données spécifiques peuvent être vues à partir du graphique à barres et les données spécifiques peuvent être vues. à partir du graphique à barres. La tendance changeante peut être vue dans le graphique courbe, et la proportion de chaque partie des données peut également être vue dans le graphique circulaire. Les Highcharts peuvent facilement obtenir l’effet de combiner trois images en une seule.
graphique var ;
$(document).ready(function() {
graphique = nouveau Highcharts.Chart({
graphique : {
renderTo : 'conteneur',
defaultSeriesType : 'zone'
},
titre : {
texte : « Croissance historique et estimée de la population mondiale par région »
},
sous-titre : {
texte : 'Source : Wikipedia.org'
},
Axe x : {
catégories : ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement : 'on',
titre : {
activé : faux
>
},
Axe y : {
titre : {
texte : 'Des milliards'
},
étiquettes : {
formateur : fonction() {
renvoie this.value / 1000;
>
>
},
info-bulle : {
formateur : fonction() {
retourner ''
this.x ': ' Highcharts.numberFormat(this.y, 0, ',') ' millions';
>
},
plotOptions : {
zone : {
empilage : 'normal',
couleur de la ligne : '#666666',
largeur de ligne : 1,
marqueur : {
largeur de ligne : 1,
couleur de la ligne : '#666666'
>
>
},
série : [{
nom : 'Asie',
données : [502, 635, 809, 947, 1402, 3634, 5268]
}, {
nom : 'Afrique',
données : [106, 107, 111, 133, 221, 767, 1766]
}, {
nom : 'Europe',
données : [163, 203, 276, 408, 547, 729, 628]
}, {
nom : 'Amérique',
données : [18, 31, 54, 156, 339, 818, 1201]
}, {
nom : 'Océanie',
données : [2, 2, 2, 6, 13, 30, 46]
}]
});
});
Ce qui précède correspond à tout le contenu décrit dans cet article. J'espère qu'il sera utile à tous ceux qui utilisent jQuery pour dessiner des histogrammes et des diagrammes circulaires