Heim > Web-Frontend > js-Tutorial > Hauptteil

jQuery.Highcharts.js zeichnet die Histogramm-Kreisdiagrammkurve chart_jquery

WBOY
Freigeben: 2016-05-16 16:09:30
Original
1255 Leute haben es durchsucht

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!