Maison > interface Web > js tutoriel > 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
Libérer: 2016-05-16 16:09:30
original
1293 Les gens l'ont consulté

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

source: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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal