Wie highcharts zu formatieren?
-
09-10-2019 - |
Frage
Ich bin mit highchart (jquery Grafik-Bibliothek). Ich bin, welche die Achse mit Tooltip. Jetzt muß i auf der Oberseite des jeweiligen Achse y bar Wert anzuzeigen. Wie kann ich das
tunMein Beispiel Graph
. Frage: Um yaxis Werte auf der jeweiligen Bar in highchart Anzeige
Lösung 3
Meine Endlösung ist für meine erwartete Graph
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/////////////////////////////////////////////
});
Andere Tipps
Hightcharts hat eine Demo mit dem gewünschten Verhalten:
http://www.highcharts.com/demo/column-rotated-labels
Hier ist der Teil des Codes, der die Etiketten auf den Balken erzeugt:
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'
}
}
Die Einstellungen werden für Live in series.dataLabels
suchen:
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;
}
}
}]
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow