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.
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
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
