HighCharts: X轴上的注释？
HighCharts: X轴上的注释？
提问于 2020-05-11 13:10:54
图片胜于文字：注释就在X轴的上方或下方
如何获得这些注释的y坐标？
下面是到目前为止的代码，其中有一个虚拟y：
var chart = Highcharts.chart('container', {
series: [{
data: [29.9, 71.5, 106.4, -129.2, -144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
var LineVal = 5.5;
// the button action
$button = $('#button');
$button.click(function() {
chart.xAxis[0].addPlotLine({
value: LineVal,
color: 'red',
width: 2,
id: 'plot-line-1'
});
chart.addAnnotation({
labels: [{
point: {
x: LineVal,
xAxis: 0,
y: 0,
yAxis:0
},
text: LineVal.toFixed(2),
backgroundColor: 'black'
}],
});
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Add plot line</button>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-11 21:00:30
我认为一个更好的解决方案是使用chart.renderer工具来呈现一个可以动态放置的标签。
演示：http://jsfiddle.net/BlackLabel/0e4vrytc/
let label = chart.renderer.label(LineVal, 0, 0, 'callout', 17.5, -50)
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
label.translate(chart.xAxis[0].toPixels(LineVal) - label.getBBox().width / 2, chart.plotHeight + chart.plotTop)API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61730538
复制相关文章
相似问题
腾讯云开发者
