javascript - HighCharts 中的 PLotLines 重叠 || 反应高图表 || Y轴间隔

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/