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

【问题标题】：Incorrectly displayed plot band icon in HighchartsHighcharts 中的绘图带图标显示不正确
【发布时间】：2016-10-11 12:32:12
【问题描述】：

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

除了我无法让图标显示在实际系列线下方之外，一切都很好。我将图标的 zIndex 设置为 1，将系列设置为 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，但它不起作用。

【问题讨论】：

看起来不太好。这就是我发现的。 forum.highcharts.com/highcharts-usage/… - 我看到的是 span 对象是在 Highcharts svg 对象之外创建的，我认为没有真正的方法可以按照您想要的方式工作。那么，它必须是 plotband 内的图像，还是也可以是 svg 对象的定位背景图像？

标签： javascript jquery css highcharts

【解决方案1】：

好的，所以最后我找到了一个非常优雅的解决方案:) 我给所有图像一个类，然后在呈现图形后，我调用 jquery 命令来定位这个类的所有父元素，我最初需要定位的跨度，但因为它没有类或 id 而不能。现在我可以将所有这些称为具有特定类的图像的父级，将它们的 z-index 分配为 -1 并且它可以工作:)

【讨论】：

【解决方案2】：

如果您以这种方式呈现图像，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 属性。

【讨论】：