Heim  >  Artikel  >  Web-Frontend  >  jQuery.Highcharts.js zeichnet die Histogramm-Kreisdiagrammkurve chart_jquery

jQuery.Highcharts.js zeichnet die Histogramm-Kreisdiagrammkurve chart_jquery

WBOY
WBOYOriginal
2016-05-16 16:09:301255Durchsuche

Im Datenstatistik- und Analysegeschäft müssen Kunden manchmal Balkendiagramme, Kreisdiagramme und Kurvendiagramme in einem Diagramm anzeigen. Das heißt, die spezifischen Daten sind aus dem Balkendiagramm ersichtlich und die spezifischen Daten können angezeigt werden Aus dem Balkendiagramm ist der sich ändernde Trend im Kurvendiagramm ersichtlich, und der Anteil jedes Teils der Daten ist auch im Kreisdiagramm zu sehen. Highcharts können problemlos den Effekt erzielen, drei Bilder zu einem zu kombinieren.

Code kopieren Der Code lautet wie folgt:

Var-Diagramm;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    Diagramm: {
                        renderTo: 'container',
                        defaultSeriesType: 'area'
                    },
                    Titel: {
                        Text: „Historisches und geschätztes weltweites Bevölkerungswachstum nach Region“
                    },
                    Untertitel: {
                        Text: 'Quelle: Wikipedia.org'
                    },
                    xAchse: {
                        Kategorien: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
                        tickmarkPlacement: 'on',
                        Titel: {
                            aktiviert: false
                        }
                    },
                    yAchse: {
                        Titel: {
                            Text: 'Milliarden'
                        },
                        Etiketten: {
                            Formatierer: function() {
                                return this.value / 1000;
                            }
                        }
                    },
                    Tooltip: {
                        Formatierer: function() {
                            zurück ''
                                 this.x ': ' Highcharts.numberFormat(this.y, 0, ',') ' Millionen';
                        }
                    },
                    plotOptions: {
                        Bereich: {
                            Stapeln: 'normal',
                            Linienfarbe: '#666666',
                            Linienbreite: 1,
                            Markierung: {
                                Linienbreite: 1,
                                Linienfarbe: '#666666'
                            }
                        }
                    },
                    Serie: [{
                        Name: 'Asien',
                        Daten: [502, 635, 809, 947, 1402, 3634, 5268]
                    }, {
                        Name: 'Afrika',
                        Daten: [106, 107, 111, 133, 221, 767, 1766]
                    }, {
                        Name: 'Europa',
                        Daten: [163, 203, 276, 408, 547, 729, 628]
                    }, {
                        Name: 'Amerika',
                        Daten: [18, 31, 54, 156, 339, 818, 1201]
                    }, {
                        Name: 'Ozeanien',
                        Daten: [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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn