javascript - HighCharts 中的绘图线重叠 || react Highcharts || Y轴间隔

Question

我正在使用 React HighCharts 库在 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 中属性(property)。 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 相同以点为单位 - 它反射(reflect)了真实值，当绘图线具有几乎相同的值时，绘图线重叠是正常的。

如果您想更改其 y 位置，您可以使用我建议的标签动态定位相同的方法(标签的当前 y 位置可以从 yAxis.plotLinesAndBands[0].svgElem.d 属性中提取):

起点用于实现定位情节线的动态逻辑:http://jsfiddle.net/BlackLabel/t2hxrwp5/