Highcharts chart aires empilées
Highcharts Plan de la zone
L'exemple suivant illustre graphique en aires empilées.
Dans la section précédente, nous savons déjà Highcharts syntaxe de configuration de base. Regardons les autres configurations. Ajouter empilement propriétés en plotOptions dans:
configuration
plotOptions: options de points de données
plotOptions utilisés pour définir les points de données du graphique des propriétés connexes. plotOptions Selon divers types de graphiques, leurs propriétés légèrement différentes.
les paramètres de configuration de la pile graphique plotOptions.area.stacking comme «normal». Si vous désactivez l'utilisation de la pile null. Si la valeur est «pour cent», appuyez sur le pourcentage empilé.
var plotOptions = {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
};
Exemples
Nom du fichier: 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>
L'exemple ci-dessus sortie est:
Highcharts Plan de la zone