Maison  >  Article  >  interface Web  >  jQuery.Highcharts.js dessine la courbe d'un histogramme circulaire chart_jquery

jQuery.Highcharts.js dessine la courbe d'un histogramme circulaire chart_jquery

WBOY
WBOYoriginal
2016-05-16 16:09:301243parcourir

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.

Copier le code Le code est le suivant :

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

Déclaration:
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