如何开发带有方框注释的自定义图表，就像附加的图像一样

Question

我如何开发带有外框注释的图表，其中注释将位于外框中，并带有每个绘图值的标记线。

highcharts#JScript

图表应该像这个图像

我的代码：

		Highcharts.chart('container', {
title: {
text: 'Highcharts Annotations'
},
subtitle: {
text: 'Annotation label position options'
},
series: [{
keys: ['y', 'id'],
data: [[29.9, '0'], [71.5, '1'], [106.4, '2'], [129.2, '3'], [144.0, '4'], [176.0, '5'], [176.0, '6']]
}],
tooltip: {
enabled: false
},
annotations: [{
labels: [{
//verticalAlign: 'top', top by default
// align: 'right',
distance: 250,             
point: '0',
width: 100
// height: 16

}, {
//verticalAlign: 'top', top by default
align: 'right',
point: '1'
}, {
//align: 'center', center by default
verticalAlign: 'top',
point: '2'
}, {
x: 50,
point: '3'
}, {
distance: 220,
point: '4',
width: 100
}],
labelOptions: {
point: '1',
y: 0,
allowOverlap: true
}
}]
});

#container {
	max-width: 800px;
	margin: 0 auto;
}	

<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; margin-top: 1em"></div>

我不是高图专家，我确实尝试过绘制2个值，但我无法管理装箱并定位在准确位置的注释

需要帮助

Answer 1

如果要将注释分配给点并将它们对齐，则必须为每个注释标签指定单独的y位置。我创建了一个如何以编程方式完成的示例。

var annotation = {
labels: [{
point: '0'
}, {
point: '1'
}, {
point: '2'
}, {
point: '3'
}, {
point: '4'
}, {
point: '5'
}],
labelOptions: {
crop: false,
shape: 'connector',
allowOverlap: true,
overflow: 'none'
}
}
Highcharts.chart('container', {
legend: {
itemMarginTop: 40
},
chart: {
events: {
load: function() {
var chart = this,
points = chart.series[0].points;
Highcharts.each(annotation.labels, function(el) {
Highcharts.each(points, function(point) {
if (el.point === point.id) {
el.y = chart.plotHeight - point.plotY + 50
}
});
});
this.addAnnotation(annotation)
}
}
},
series: [{
keys: ['y', 'id'],
data: [
[29.9, '0'],
[71.5, '1'],
[106.4, '2'],
[129.2, '3'],
[144.0, '4'],
[176.0, '5'],
[176.0, '6']
]
}],
tooltip: {
enabled: false
}
});

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

API：https://api.highcharts.com/highstock/annotations.labelOptions.y