Question

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

除了我无法在实际系列行下方显示图标外，一切正常。我将图标的zIndex设置为1，将系列设置为2，但它似乎没有做任何事情。

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

但它应该基于此工作，但事实并非如此，当我使用文本作为标签时，它可以工作，但不是图像，并且对象没有特定的类或ID，因此我可以使用jquery来设置它并设置css手动。

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

我用过例如

 {
    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，但它不起作用。

Answer 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属性。

Answer 2

好的，所以最后我发现了一个非常优雅的解决方案:) 我给所有图像一个类，然后在渲染图形之后，我调用jquery命令，该命令针对此类的所有父元素，我最初需要定位的范围，但不能，因为它没有类或id。现在我可以将所有这些作为我的图像的父亲用特定的类调用，将它们作为-1的z-index，它起作用：）

Highcharts中的绘图带图标显示不正确

2 个答案: