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 属性中。 yAxis.plotLinesAndBands[i].label 是 SVGElement 所以它的 y 位置可以这样改变：yAxis.plotLinesAndBands[i].label.attr({y: newValue}).

起点用于实现定位绘图线标签的动态逻辑：http://jsfiddle.net/BlackLabel/1vh940kj/

API 参考文献：

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

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

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

HighCharts 中的绘图线重叠 ||反应高图表 || Y轴区间

PLotLines In HighCharts Overlapping || React highCharts || YAxis Interval

javascript

reactjs

highcharts

react-highcharts