如何将数据标签定位在高图中区域范围图的中点

Question

Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
plotOptions: {
arearange: {
dataLabels: {
enabled: true,
yLow: 5,
verticalAlign: 'bottom',
inside: true,
color: 'black',
formatter: function(e) { 
if((this.x==0) && (this.point.low==this.y))
return this.series.name
}
}
}
},
legend: {
enabled: false
},
series: [{
name: "AREA 1",
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
name: "AREA 2",
data: [
[20, 40],
[20, 40],
]
}]
});

上面是我使用arearage图表绘制的一段代码示例。这张图绘制得很成功，正如我所希望的那样。但似乎有一个问题。我想要系列名称"；AREA1"；以及"；AREA2"；以在各个y轴值的中点中示出。即"；区域1"；应显示在5(0和10的中点(；区域2"；应显示在30(20和40的中点(。有办法做到这一点吗？我已尝试在plotOptions中指定yLow值。但它对我不起作用，因为序列数据是动态的。

我使用的图表是highcharts，版本是4.1.5

请帮忙！！提前感谢

Answer 1

您可以添加带有禁用标记和启用数据标签的模拟散点序列，以在适当的位置显示序列名称：

series: [..., {
linkedTo: 0,
dataLabels: {
format: 'AREA 1'
},
type: 'scatter',
data: [(area1Data[0][0] + area1Data[0][1]) / 2]
}, {
linkedTo: 1,
dataLabels: {
format: 'AREA 2'
},
type: 'scatter',
data: [(area2Data[0][0] + area2Data[0][1]) / 2]
}
]

---

现场演示：http://jsfiddle.net/BlackLabel/d01e2ymx/

API参考：https://api.highcharts.com/highcharts/series.scatter