顯示自定義圖標圖像[html]每個xAxis類別標籤highcharts.js

我有這個圖表圖我工作，基本上是一組10行[系列]，我必須dinamically添加自定義圖標（圖像）到每個欄的開頭，我可以在圖像上添加廣告，但在所有行上都顯示相同的元素，真的很感謝這方面的幫助。顯示自定義圖標圖像[html]每個xAxis類別標籤highcharts.js

這是我創建的jsFiddle http://jsfiddle.net/KrTbz/。

，這是js代碼，我需要做的工作

  labels: { 
       color: '#fff', 

       x: 5, 
       useHTML: true, 
       formatter: function() { 
        return '<img class="" src="http://dummyimage.com/60x60/ff6600/ffffff"/>'; 
       } 

      }

希望我能得到一些幫助。

來源

2012-11-15 user1547007

我看到你已經把DummyImage http://dummyimage.com/60x60/ff6600/ffffff放在他們面前。你只是想改變它？ – JoshGough

這就是問題所在，我需要在每個欄上放置不同的圖標img，任何想法如何實現？ – user1547007

見http://jsfiddle.net/troynt/KrTbz/3/

只需更換你想要的任何圖像隨機字佔位符。

formatter: function() { 
    return { 
     'Awesome': 'blah', 
     'Awesome Previous': 'yadda', 
     'Good': 'dabba', 
     'Good Previous': 'doo', 
     'Okay': 'word', 
     'Okay Previous':'up', 
     'Awful': 'blah', 
     'Awfull Previous': 'blah2' 
    }[this.value]; 
}

來源

2012-11-15 02:51:39 troynt

你真是太棒了！ – user1547007

好了，你可以嘗試這樣開始：

http://jsfiddle.net/KrTbz/1/

formatter: function() { 
        console.log(this); 
        return '<img class="" ' + 
src="http://dummyimage.com/100x30/ff6600/ffffff?text=' + this.value + '" />'; 
       }

的this值是正在繪製當前行，並this.value有標籤。

如果您在Chrome中運行該命令，然後按F12查看控制檯，則可以看到console.log會轉儲出完整的對象。

如果您需要更多的差異，您可以在該值上進行分支。

來源

2012-11-15 02:51:49 JoshGough

每個標籤可以應用自定義圖像，試試這個，使用圖像的陣列標籤爲索引：

$(function() { 

     var categoryImgs = { 
      'Apples': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img>&nbsp;', 
      'Oranges':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;', 
      'Pears':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;', 
      'Grapes':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;', 
      'Bananas':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;' 
     }; 

     $('#container').highcharts({ 
      chart: { 
       type: 'column' 
      }, 

      title: { 
       text: 'Stacked column chart' 
      }, 
      xAxis: { 
       categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'], 
       labels: { 
        x: 5, 
        useHTML: true,       
        formatter: function() { 
         return '<div class="myToolTip" title="Hello ' 
         + this.value +'">' + categoryImgs[this.value] + '</div>'; 
        },

希望幫助！

來源

2014-02-19 21:59:10 maximumride

顯示自定義圖標圖像[html]每個xAxis類別標籤highcharts.js

回答

相關問題