Highcharts - Graphique à colonnes empilées
Voici un exemple de graphique à colonnes empilées.
Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts . Voyons maintenant des configurations supplémentaires et aussi comment nous avons ajouté l'attribut d'empilement dans plotoptions.
Un exemple de graphique à colonnes empilées est donné ci-dessous.
plotOptions
Le plotOptions est un objet wrapper pour les objets de configuration pour chaque type de série. Les objets de configuration pour chaque série peuvent également être remplacés pour chaque élément de série comme indiqué dans le tableau de séries. Il s'agit d'empiler les valeurs de chaque série les unes sur les autres.
Configurez l'empilement du graphique en utilisant plotOptions.column.stacking comme "normal". Les valeurs possibles sont nulles, ce qui désactive l'empilement, les piles «normales» par valeur et «pourcentage» empile le graphique par des pourcentages.
var plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
};Exemple
highcharts_column_stacked.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://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: 'Stacked column chart'
};
var xAxis = {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
};
var yAxis = {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
};
var legend = {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (
Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
};
var tooltip = {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
};
var plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor)
|| 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
};
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.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>Résultat
Vérifiez le résultat.