Highcharts empilés graphique à colonnes en utilisant des pourcentages
Highcharts graphique à colonnes
L'exemple suivant illustre l'utilisation du pourcentage de graphique à colonnes 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 «pour cent». Si vous désactivez l'utilisation de la pile null.
var plotOptions = {
column: {
stacking: 'percent'
}
};
Exemples
Nom du fichier: highcharts_column_percentage.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: 'column'
};
var title = {
text: '堆叠柱形图'
};
var xAxis = {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
};
var yAxis ={
min: 0,
title: {
text: '水果总消费量'
}
};
var tooltip = {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
};
var plotOptions = {
column: {
stacking: 'percent'
}
};
var credits = {
enabled: false
};
var series= [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}];
var json = {};
json.chart = chart;
json.title = title;
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: