Come formattare Highcharts?
-
09-10-2019 - |
Domanda
Sto usando highchart (biblioteca grafico jQuery). Io sto indicando l'asse con il tooltip. ora ho bisogno di visualizzare il valore dell'asse y sulla parte superiore della rispettiva barra. Come posso fare che
Il mio esempio grafico
Domanda:. Per visualizzare asseY valori sulla parte superiore della rispettiva barra in highchart
Soluzione 3
La mia soluzione finale è per il mio grafico previsto
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'faq_view_graph',
defaultSeriesType: 'column'
},
title: {
text: 'Category View'
},
xAxis: {
categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5', 'Category6', 'Category7', 'Category8', 'Category9', 'Category10'],
title:{
text: 'Views'
}
},
yAxis: {
min: 0,
title: {
text: 'Category'
}
},
tooltip: {
enabled: true,
formatter: function() {
return ''+this.series.name +': '+ this.y;
}
},
point: {
events: {
click: function() {
alert('check');
}
}
},
///////////////////////////////////////////////////////////////////////////////
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert ('Category: '+ this.x +', value: '+ this.y);
}
}
}
}
},
///////////////////////////////////////////////////////////////////////////////
series: [{
name: 'Number of visits',
data: [5, 3, 4, 10, 2, 19, 56, 23, 21, 70],
//Codes to display value on top of each bar
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'right',
x: -3,
y: 10,
formatter: function() {
return this.y;
},
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
}]
});
//////////////////////////////Graph/////////////////////////////////////////////
});
Altri suggerimenti
Hightcharts ha una demo con il comportamento desiderato:
http://www.highcharts.com/demo/column-rotated-labels
Questa è la parte del codice che crea le etichette sulle barre:
dataLabels: {
enabled: true,
rotation: -90,
color: Highcharts.theme.dataLabelsColor || '#FFFFFF',
align: 'right',
x: -3,
y: 10,
formatter: function() {
return this.y;
},
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
Le impostazioni che stai cercando in diretta in series.dataLabels
:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Category View'
},
xAxis: {
categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
},
yAxis: {
title: {
text: 'Views'
}
},
series: [{
name: 'Number of Visits',
data: [5, 3, 4, 7, 2],
dataLabels: {
enabled: true,
formatter: function() {
return this.y;
}
}
}]
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow