Highcharts gestapelten Flächendiagramm
Das folgende Beispiel zeigt gestapelte Flächendiagramm.
Im vorigen Abschnitt wissen wir bereits Highcharts Basiskonfiguration Syntax. Schauen wir uns die anderen Konfigurationen zu suchen. Fügen Sie Eigenschaften in plotOptions in Stapeln:
Konfiguration
plotOptions: Datenpunktoptionen
plotOptions verwendet, um die Diagrammdatenpunkte bezogenen Eigenschaften einzustellen. plotOptions Nach verschiedenen Diagrammtypen, stellen ihre Eigenschaften etwas anders.
Diagramm Stapel Konfigurationseinstellungen plotOptions.area.stacking als "normal". Wenn Sie Stack Verwendung null deaktivieren. Wenn der Wert "Prozent" gestapelt drücken Prozentsatz ist.
var plotOptions = { area: { stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } };
Beispiele
Dateiname: highcharts_area_stacked.htm
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 本教程(w3big.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 obige Beispiel Ausgabe lautet: