时间戳

首页 > 解决方案 > Higcharts：当有不同颜色的 plotBand 时，如何在图表上渲染背景文本？

highcharts - Higcharts：当有不同颜色的 plotBand 时，如何在图表上渲染背景文本？

问题描述

我有这段代码，我在图表的背景上呈现了文本，还有一个具有不同背景颜色的 plotBand。

背景中的文本呈现为：

 this.renderer.text('This text is <span style="color: rgb(255,0,0)">styled</span>!!!', 50, 150)
   .css({
     color: 'rgb(0,0,255)',
     fontSize: '40px'
   }).add();

而 plotBand 配置为：

  xAxis: {
    plotBands: [{ // mark the weekend
      color: 'rgb(0,255,0)',//'rgba(0,255,0,0.5)',
      from: Date.UTC(2010, 0, 2),
      to: Date.UTC(2010, 0, 4),
      label: {
        text: 'Plot band',
        align: 'right',
        x: -10
      }
    }],
    tickInterval: 24 * 3600 * 1000, // one day
    type: 'datetime'
  },

在我得到的结果中，我们可以看到 plotBand 是如何超出背景文本的，这是我需要避免的。我需要我的背景文本在这个 plotBand 前完全可见。

在此处输入图像描述

作为一种解决方法，我将设置不透明度与绘图背景颜色绑定在一起color: 'rgba(0,255,0,0.5)'，但这并没有帮助，因为颜色会相互干扰，并且背景文本不在 plotBand 前面是显而易见的。

标签： highcharts

解决方案

您可以使用toFrontSVGElement 中内置的方法。

演示：https ://jsfiddle.net/BlackLabel/vj51kogm/

 function() {
  let text = this.renderer.text('This text is <span style="color: rgb(255,0,0)">styled</span>!!!', 50, 150)
    .css({
      color: 'rgb(0,0,255)',
      fontSize: '40px',
    }).add();
        
    text.toFront()
}

API：https ://api.highcharts.com/class-reference/Highcharts.SVGElement#toFront

推荐阅读