在Highcharts中不正确地显示绘图带图标

Incorrectly displayed plot band icon in Highcharts

本文关键字：绘图 图标 显示 正确地 Highcharts 不正确      更新时间：2023-09-26

我试图在Highcharts中创建一个带有绘图带的图形，我想在其中插入一个图标到绘图带。

一切都很好，除了我不能让图标显示在实际的系列线下面。我将图标的zIndex设置为1,series设置为2，但它似乎没有做任何事情。

我看了这里的文档:http://api.highcharts.com/highcharts/xAxis.plotBands.zIndex

但是它应该在此基础上工作，但它没有，当我使用文本作为标签时，它工作，但不是图像，对象没有特定的类或ID，所以我可以用jquery瞄准它并手动设置css。

为了说明我的观点，我做了一个小提琴:

http://jsfiddle.net/qwfj4x3j/

我用了

 {
    color: null,
    zIndex: -1,
    from: 3.5,
    to: 4.5,
    label: {
        text: "<img src='http://simpleicon.com/wp-content/uploads/rain.png' style='width:100px;z-index:-1'>",
    verticalAlign: 'top',
    useHTML: true,
    y: 25
    }

},

您可以看到，我设置了绘图带和实际图像的zIndex，并为该系列设置了更高的zIndex，但它不起作用。

好的，所以最后我找到了一个非常优雅的解决方案:)我给所有的图像一个类，然后在图形呈现后，我调用jquery命令，目标类的所有父元素，跨度，我最初需要的目标，但不能，因为它没有类或id。现在我可以将所有这些作为图像的父类并指定z-index为-1这样就可以了

如果以这种方式呈现图像，HTML <img>将呈现在svg的顶部-这就是图像覆盖svg元素的原因。相反，您可以使用chart.renderer.image()方法与axis.toPixels()方法结合使用，以像素为单位获取x, y属性。

var img;
function renderImage() {
    var chart = this;
    img = chart.renderer.image(
              'http://simpleicon.com/wp-content/uploads/rain.png', 
               chart.xAxis[0].toPixels(0), 
               chart.yAxis[0].toPixels(10), 
               150, 
               150
          )
          .add();
}
function redrawImage() {
    img.attr({
      x: this.xAxis[0].toPixels(0),
      y: this.yAxis[0].toPixels(10)
    });
}

示例:http://jsfiddle.net/qwfj4x3j/2/

要使图像像情节线一样响应，您需要调整重绘事件的x, y属性。

相关文章：