Highcharts - Graphique en pourcentage
Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts . Voici un exemple de graphique à aires en pourcentage.
Laissez-nous comprendre les configurations supplémentaires ici. Nous avons ajouté l'attribut stacking dans plotoptions.
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 à l'aide de plotOptions.area.stackingcomme "pourcentage". 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 = {
area: {
stacking: 'percent',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
};Exemple
highcharts_area_percentage.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: '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: 'percent',
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>Résultat
Vérifiez le résultat.