我在图表中绘制了几个绘图带,每个带都有标签。
但是当时间范围变为所有时间时,绘图带会变窄以包含整个标签,因此标签会相互重叠。
我可以在超出plotband边界的情况下禁用plotband的标签吗?怎么样?
答案 0 :(得分:2)
您可以检查标签宽度是否更大,然后在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])
}
}
},