Question

我在图表中绘制了几个绘图带，每个带都有标签。

但是当时间范围变为所有时间时，绘图带会变窄以包含整个标签，因此标签会相互重叠。

我可以在超出plotband边界的情况下禁用plotband的标签吗？怎么样？

Answer 1

您可以检查标签宽度是否更大，然后在afterSetExtremes事件上绘制带宽，如果是，则通过将其不透明度设置为0来隐藏它。

切换标签不透明度的功能：

function togglePlotbands() {
  this.plotLinesAndBands.forEach(plotband => {
    const { plotLeft, plotWidth } = this.chart
    const from = Math.max(this.toPixels(plotband.options.from), plotLeft)
    const to = Math.min(this.toPixels(plotband.options.to), plotLeft + plotWidth)

    const plotbandWidth = to - from
    const show = plotband.label.getBBox().width < plotbandWidth

    plotband.label.css({ opacity: Number(show) })
  })
}

调用afterSetExtremes：

events: {
  afterSetExtremes: togglePlotbands
}

可选择加载图表：

chart: {
  events: {
    load: function() {
      togglePlotbands.call(this.xAxis[0])
    }
  }
},

示例：http://jsfiddle.net/r89r2sr0/

我可以在超出plotband边界时禁用plotband的标签吗？Highstock

1 个答案: