在Highcharts中错误地显示了阴谋乐队图标

我正尝试在Highcharts中创建一个阴谋乐队的图表，我想在该乐队中插入一个图标。在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更高，但不起作用。

来源

2016-10-11 Jachym

看起来不太好。这是我发现的。 http://forum.highcharts.com/highcharts-usage/image-in-plotband-instead-of-label-t14907/ - 我所看到的是'span'对象是在Highcharts'svg'对象之外创建的，并且我没有看到以您想要的方式完成工作的真正方法。那么，它必须是情节带内的图像，还是它也可以是svg对象的定位背景图像？ – nilsole

如果以这种方式渲染图像，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上重绘事件属性。

来源

2016-10-11 16:36:50 morganfree

OK，所以最后我发现了一个很优雅的解决方案:) 我给所有的图像类和图形呈现在此之后，我打电话jQuery的命令是针对此类的所有父元素，跨度我原本需要定位，但不能，因为它没有类或id。现在我可以把所有这些视为具有特定类别的图像的父母，将它们设为-1的索引并且它可以工作:)

来源

2016-10-12 11:11:48 Jachym

在Highcharts中错误地显示了阴谋乐队图标

回答

相关问题