在highchart中是否可以在每个列中添加图例,同时将每个库伦的值或标签保留在该列顶部(如所附图像),这是我在jsfiddle上的代码在此处输入链接描述
$('#container').highcharts({
"chart": {
"type": "column",
"style": {
"fontFamily": "Arial",
"fontSize": 12
},
"backgroundColor": "transparent",
"width": 460
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true,
"format": "${y}"
},
"pointPadding": 0,
"groupPadding": 0.1
}
},
"xAxis": [{
"categories": [
"Jan",
"Feb",
"Mar"],
}],
"series": [{
"name": "2014",
"color": "#231E1E",
"marker": {
"radius": 3
},
"showInLegend": true,
"connectNulls": true,
"tooltip": [
],
"data": [
10,
20,
30]
}, {
"name": "2015",
"color": "#1DBEDE",
"marker": {
"radius": 3
},
"showInLegend": true,
"connectNulls": true,
"tooltip": [
],
"data": [
12,
22,
32]
}]
});
您可以使用plotOptions.series.dataLabels.formatter
代替format
:
dataLabels: {
enabled: true,
useHTML: true,
y: 30,
formatter: function() {
return "$" + this.y + "<br><br><br>" +
"<div style='-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);'>" +
this.series.name + "</div>";
}
}
您可以准确地告诉图表您希望标签显示的方式。this.y
是美元值,并this.series.name
为一系列操作,名称2014
和2015
。y: 30
是标签应相对于列顶部放置的位置。这是一个DEMO。
PS:问题在于每一列不能有两个数据标签。在本示例中,您必须设置顶部标签的位置(如我的回答中所述)或将其设置为底部标签的位置。如您所见,每个示例中都有一些问题,但不能同时存在。然而,有可能是这样一种解决方法这个,但它不干净。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句