Highcharts - Graphique à barres empilées
Voici un exemple de graphique à barres de base.
Nous avons déjà vu la plupart des configurations utilisées pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts . Un exemple de graphique à barres de base est donné ci-dessous.
Configurations
Voyons maintenant les configurations / étapes supplémentaires prises.
plotOptions
Configurez l'empilement du graphique en utilisant plotOptions.series.stacking comme "normal". Les valeurs possibles sont nulles, ce qui désactive l'empilement, les piles «normales» par valeur et «pourcentage» empile la série par des pourcentages.
var plotOptions = {
series: {
stacking: 'normal'
}
};Exemple
highcharts_bar_basic.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: 'bar'
};
var title = {
text: 'Historic World Population by Region'
};
var subtitle = {
text: 'Source: Wikipedia.org'
};
var xAxis = {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
};
var yAxis = {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
};
var tooltip = {
valueSuffix: ' millions'
};
var plotOptions = {
bar: {
dataLabels: {
enabled: true
}
},
series: {
stacking: 'normal'
}
};
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (
(Highcharts.theme && Highcharts.theme.legendBackgroundColor)
|| '#FFFFFF'),
shadow: true
};
var credits = {
enabled: false
};
var series = [
{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
},
{
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
},
{
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
json.legend = legend;
json.credits = credits;
$('#container').highcharts(json);
});
</script>
</body>
</html>Résultat
Vérifiez le résultat.