Highcharts - Grafico ad area percentuale
Abbiamo già visto la configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts . Di seguito è riportato un esempio di un grafico ad area percentuale.
Cerchiamo di capire le configurazioni aggiuntive qui. Abbiamo aggiunto l'attributo stacking in plotoptions.
plotOptions
Il plotOptions è un oggetto wrapper per oggetti di configurazione per ogni tipo di serie. Gli oggetti di configurazione per ciascuna serie possono anche essere sovrascritti per ogni elemento della serie come indicato nella matrice della serie. Questo serve per impilare i valori di ogni serie uno sopra l'altro.
Configurare l'impilamento del grafico utilizzando plotOptions.area.stackingcome "percentuale". I valori possibili sono null che disabilita lo stacking, "normale" impila per valore e "percentuale" impila il grafico per percentuali.
var plotOptions = {
area: {
stacking: 'percent',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
};Esempio
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>Risultato
Verifica il risultato.