Highcharts - Grafico a colonne in pila
Di seguito è riportato un esempio di un istogramma in pila.
Abbiamo già visto la configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts . Vediamo ora configurazioni aggiuntive e anche come abbiamo aggiunto l'attributo stacking in plotoptions.
Di seguito viene fornito un esempio di istogramma in pila.
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.
Configura l'impilamento del grafico utilizzando plotOptions.column.stacking come "normale". I valori possibili sono null che disabilita lo stacking, "normale" impila per valore e "percentuale" impila il grafico per percentuali.
var plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
};Esempio
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>Risultato
Verifica il risultato.