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);