Highcharts gestapeltes Flächendiagramm
Das folgende Beispiel zeigt ein gestapeltes Flächendiagramm.
In den vorherigen Kapiteln haben wir die grundlegende Konfigurationssyntax von Highcharts kennengelernt. Als Nächstes sehen wir uns andere Konfigurationen an. Fügen Sie die Eigenschaft stacking in plotOptions hinzu:
Konfiguration
plotOptions: Datenpunkt-Optionen
plotOptions wird verwendet, um Eigenschaften im Zusammenhang mit Datenpunkten in einem Diagramm zu konfigurieren. Die Eigenschaftseinstellungen für plotOptions variieren je nach Diagrammtyp leicht.
Setzen Sie die Stapeloption des Diagramms plotOptions.area.stacking auf "normal" fest. Verwenden Sie null, um die Stapelung zu deaktivieren. Wenn der Wert "percent" ist, wird die Stapelung prozentual berechnet.
var plotOptions = {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
};
Beispiel
Dateiname: highcharts_area_stacked.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Example(example.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'area'
};
var title = {
text: 'Historic and Estimated Worldwide Population Growth by Region'
};
var subtitle = {
text: 'Source: Wikipedia.org'
};
var xAxis = {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
};
var yAxis = {
title: {
text: 'Billions'
},
labels: {
formatter: function () {
return this.value / 1000;
}
}
};
var tooltip = {
shared: true,
valueSuffix: ' millions'
};
var plotOptions = {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
};
var credits = {
enabled: false
};
var series= [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
Das Ausgabeergebnis des obigen Beispiels ist:
Weitere Erweiterungen