Colonna con percentuale in pila
Di seguito è riportato un esempio di un grafico a colonne in pila con percentuali.
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 di impilamento inplotoptions.
Di seguito è fornito un esempio di grafico a colonne in pila con percentuali.
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 nell'array della serie. Questo serve per impilare i valori di ciascuna serie uno sopra l'altro. Questo serve per impilare i valori di ciascuna serie uno sopra l'altro.
Configurare l'impilamento del grafico utilizzando plotOptions.column.stacking come "percentuale". I valori possibili sono null che disabilita lo stacking, "normale" impila per valore e "percentuale" impila il grafico per percentuali.
var plotOptions = {
series: {
stacking: 'percent'
}
};
Esempio
app.component.ts
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
highcharts = Highcharts;
chartOptions = {
chart: {
type: 'column'
},
title: {
text: 'Historic World Population by Region'
},
subtitle : {
text: 'Source: Wikipedia.org'
},
legend : {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 250,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
'#FFFFFF'), shadow: true
},
xAxis:{
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], title: {
text: null
}
},
yAxis : {
min: 0,
title: {
text: 'Population (millions)', align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip : {
valueSuffix: ' millions'
},
plotOptions : {
column: {
dataLabels: {
enabled: true
}
},
series: {
stacking: 'percent'
}
},
credits:{
enabled: false
},
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]
}
]
};
}
Risultato
Verifica il risultato.