在带有绘图选项高图表 (BAR) 的栏下添加文本

Question

嗨，我尝试为每个条形添加额外的文本plotOptions datalabels。 我得到了我想要的值，但我无法将其定位在柱线之下。

我的代码

plotOptions: {
series: {
dataLabels: {
useHTML: true,
formatter:function() {
var pcnt = (this.y / dataSum) * 100;
return '<span  class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span  class="">' + this.point.name + ' this i want put under the bar' + '</span>';
}}
}
}

我尽量不使用xasixdatalabels，因为我也想展示它。 如何使额外的文本位于每个栏的下方？

如果有人在使用plotoptions之外还有其他建议，我没问题。谢谢。

这是链接

Answer 1

如果不破解Highcharts，您将无法使用数据标签来做到这一点。

我建议你看看注释模块。 您可以将标签放置在图表上的任意位置并自定义其外观。

问候

Answer 2

你可以通过使用你定义的外部data数组并添加一个假系列来做到这一点，如下所示：

chart: {
...,
events: {
load: function() {         
this.addSeries({
data: [{x: 0, y: 1},{x: 1, y: 1},{x: 2, y: 1},{x: 3, y: 1}],
enableMouseTracking: false,
dataLabels: {
useHTML: true,
formatter:function() {
var pcnt = (data[this.x].y / dataSum) * 100;
return '<span  class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span  class="">' + data[this.x].name + ' this i want put under the bar' + '</span>';
}
}
}, true);
}
}
}

不漂亮，但它有效。当然，如果需要，您可以通过循环浏览图表来摆脱外部数据引用。以同样的方式，您可以消除为第二个系列创建静态数据集的需要。

var data = [
{
name: 'item 1',
y: 1756,
fontWeight: 'bold',

},{
name: 'item 2',
y: 512,
fontWeight: 'bold',

},{
name: 'item 3',
y: 756,
fontWeight: 'bold',

},
{
name: 'item 4',
y: 956,
fontWeight: 'bold',

}
]
var colors = ['#a3cb38','#ea2027','#0652dd','#ffc312'];
var dataSum = data.reduce((a,x)=>a+x.y,0);
Highcharts.chart('highchart', {
chart: {
type: 'bar', 
backgroundColor: null,
height: 270,
events: {
load: function() {         
this.addSeries({
data: [{x: 0, y: 1},{x: 1, y: 1},{x: 2, y: 1},{x: 3, y: 1}],
enableMouseTracking: false,
dataLabels: {
useHTML: true,
formatter:function() {
var pcnt = (data[this.x].y / dataSum) * 100;
return '<span  class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span  class="">' + data[this.x].name + ' this i want put under the bar' + '</span>';
}}
}, true);
}
}
},
title: {
text: ''
},
xAxis: {
type: 'category',
labels: {
style: {
width: '75px',
'min-width': '75px',
height: '42px',
'min-height': '42px',
align: 'high'
},
useHTML : true,
formatter: function () {
return '<div class="myToolTip" title="Hello">'+this.value+'</div>';
},
}
},
colors: colors,
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: ''
},
gridLineWidth: 0,
labels:
{
enabled: false
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
pointPadding: 0.25,
groupPadding: 0,
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
},
colorByPoint: true
}
},
tooltip: {
headerFormat: '<span style="font-size:11px"> lorem</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.f} lala</b><br/>'
},
series: [{
data: data
}
]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src=https://code.highcharts.com/modules/drilldown.js></script>
<div id="highchart" style="height: 400px"></div>

工作示例 jsfiddle：https://jsfiddle.net/zjxp57n6/4/