PLOTLines在HighCharts中重叠||反应highCharts || YAxis Interval

Question

我正在使用React HighCharts Library在React Js中开发一个条形图。因此在某些情况下，我的数据间隔不是线性的（最小值和最大值之间的差异非常大）。所以情节线是重叠的。分享图片以供参考。

请帮我解决这个问题，我希望我的标签能够清楚地显示出来。

在这张图片中，我有2条曲线，其值为0.66，附近的某些值为0.5左右。 它们是重叠的。请帮忙解决这个问题。

感谢。

Answer 1

Highcharts没有提供处理重叠绘图线的任何机制 - 必须手动完成。

可以使用y属性调整绘图线标签：

plotLines: [{
    value: 22,
  color: 'red',
  width: 1,
  label: {
    text: 'First label',
    y: 13
  }
}

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

如果您正在寻找更具动态性的方法，请将代码更改为chart.events.load回调中更改标签位置的代码。

标签的当前y位置保存在yAxis.plotLinesAndBands[i].label.alignAttr.y属性中。 yAxis.plotLinesAndBands[i].label为SVGElement，因此其y位置可以更改为：yAxis.plotLinesAndBands[i].label.attr({y: newValue})。

用于实现定位图线标签的动态逻辑的

起点：http://jsfiddle.net/BlackLabel/1vh940kj/

API参考：

• https://api.highcharts.com/highcharts/yAxis.plotLines.label.y
• https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

绘图线value属性与点y的作用相同 - 它反映了实际值，当绘图线具有几乎相同的值时，绘图线重叠是正常的。

如果你想改变它的y位置，你可以使用我建议的动态定位标签的相同方法（标签的当前y位置可以从yAxis.plotLinesAndBands[0].svgElem.d属性中提取）：

用于实现定位绘图线的动态逻辑的

起点：http://jsfiddle.net/BlackLabel/t2hxrwp5/