Colonna con etichette ruotate
Di seguito è riportato un esempio di un istogramma con etichette ruotate.
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 rotazione in dataLabels.
Di seguito viene fornito un esempio di istogramma con etichette ruotate.
dataLabels
dataLabels è un oggetto wrapper per gestire le etichette dei dati all'interno dei grafici.
Rotazione del testo in gradi. Si noti che a causa di una struttura più complessa, sfondi, bordi e riempimento andranno persi su un'etichetta dati ruotata. Il valore predefinito è 0.
dataLabels = {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
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: 'World\'s largest cities per 2014'
},
subtitle: {
text: 'Source: <a href = "http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
},
xAxis : {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis : {
min: 0,
title: {
text: 'Population (millions)'
}
},
tooltip : {
pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
},
credits : {
enabled: false
},
series : [
{
name: 'Population',
data: [
['Shanghai', 23.7],
['Lagos', 16.1],
['Instanbul', 14.2],
['Karachi', 14.0],
['Mumbai', 12.5],
['Moscow', 12.1],
['Sao Paulo', 11.8],
['Beijing', 11.7],
['Guangzhou', 11.1],
['Delhi', 11.1],
['Shenzhen', 10.5],
['Seoul', 10.4],
['Jakarta', 10.0],
['Kinshasa', 9.3],
['Tianjin', 9.3],
['Tokyo', 9.0],
['Cairo', 8.9],
['Dhaka', 8.9],
['Mexico City', 8.9],
['Lima', 8.9]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}
]
};
}
Risultato
Verifica il risultato.