Highcharts中没有背景图像

Question

基本上，这是一个巨大的基于Web服务的Web应用程序，可以显示数百个图形。我刚刚参与了该项目，需要在这些动态生成的图表上实施图形图例。

我知道我的形象被加载，因为当我输入了不正确的/随机路径我得到的错误：

目前，从CSS显示，但图像中的文本不能在它进入的地方，因为它似乎只允许一组标签。我已经尝试将它作为img放置在显示器中，以及改变Z索引和位置，但它只是不显示任何内容，除了文本。

下面是相关的CSS（我用的background代替backgroundImage已经尝试BTW）：

credits: { 
    enabled: true, 
    text: 'Highcharts.com', 
    href: 'http://www.highcharts.com', 
    position: { 
     align: 'right', 
     x: -10, 
     verticalAlign: 'bottom', 
     y: -5 
    }, 
    style: { 
     cursor: 'pointer', 
     color: '#909090', 
     fontSize: '10px', 
     backgroundImage: 'url("/image/example")' 
    } 
} 

和潜在相关的JavaScript：

if (credits.enabled && !chart.credits) { 
     creditsHref = credits.href; 
    chart.credits = renderer.text(
     credits.text, 
     0, 
    0 
    ) 
    .on('click', function() { 
     if (creditsHref) { 
      location.href = creditsHref; 
     } 
    }) 
    .attr({ 
     align: credits.position.align, 
     zIndex: 8 
    }) 
    .css(credits.style) 
    .add() 
    .align(credits.position); 
} 

Answer 1

更新2 ：

首先关闭，您需要更改数字以适合您的情况（宽度，高度，x，y等）。看起来你也改变了图表类型。要重置回样图使用这样的：

chart: { 
     renderTo: 'your-container-id', // chart div id 
     type: 'spline', // your chart type 
.... 

接下来，我们需要确保，图表不会调整浏览器的设置宽度调整：<div id="your-container-id" style="width:1000px;"></div>或设置为任何所需的大小。

然后，我们需要设置右边距以确保右边有负空间。

chart: { 
renderTo: 'your-container-id', // chart div id 
type: 'spline', // your chart type 
margin: [ 50, 150, 100, 80 ], // top, right, bottom, left. leaves 150px negative space on right side of chart. adjust as needed 
.... 

最后，我们将图像呈现到图表的右边：

chart: { 
renderTo: 'your-container-id', // chart div id 
type: 'spline', // your chart type 
margin: [ 50, 150, 100, 80 ], // top, right, bottom, left. leaves 150px negative space on right side of chart. adjust as needed 
events: { 
    load: function() { 
    this.renderer.image('http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png', 900, 105, 100, 100).add(); // x=900px to move image off chart (approx div width minus right margin) adjust as needed 
     } 
    } 
.... 

如果您需要的图表大小调整，那么我们需要写一个函数来重新定位上调整图形大小。但这是另一章。

如果我仍然在错误的场地，请详细说明所需的结果。

更新1：

您不能添加背景，以图表的制作人员名单。我通常禁用它，除非我们用我们的公司名称和链接标记它。您需要的是使用图例功能，或者如果这不是您需要的，请使用大幅度的自定义图像。

看看这个简单的摆弄我从highcharts现场陷入僵局和修改，以适应我试图解释：jsFiddle Link
OK，什么事情是：
添加标准传说与隐藏/显示功能图：

legend: { 
    layout: 'vertical', // stacked legend. can also be horizontal and moved to bottom for a clean linear legend 
    backgroundColor: '#FFFFFF', 
    align: 'left', 
    verticalAlign: 'top', 
    x: 380, // move to right side of chart 
    y: 200, // drop down 200px 
    floating: true, // enabled for positioning 
    shadow: true 
}, 

添加背景图片一路向右：

chart: { 
    renderTo: 'container', 
    type: 'column', 
    margin: [ 50, 150, 100, 80 ], // wide right margin to allow image outside chart 
    events: { 
    load: function() { 
     this.renderer.image('http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png', 400, 105, 100, 100).add(); // x=400px to move image off chart 
    } 
} 
} 

注：我的图表容器的宽度设置为500像素。

我希望这可以清除一些事情。

原来的答案：

我刚刚更新了我们公司所有图表highcharts上周..用这个背景图像

chart: { 
      renderTo: 'container', // where does the chart go? 
      type: 'column', // what kind of chart is it? 
      margin: [ 50, 50, 100, 80 ], // margins between outer edge and plot area 
      events: { 
       load: function() { 
        this.renderer.image('http://www.domain.com/images/logo.jpg', 150, 105, 545, 141).add(); // add image(url, x, y, w, h) 
       } 
      } 
     }, 

图像参数如下：image(url, x, y, width, height);