2016-01-20 59 views
0

我試圖改變工具提示背景顏色。這是目前的看法。 Tornado Chart如何更改Highchart中的工具提示顏色?

我使用的格式化功能是

 tooltip: { 
     useHTML: true, 
     enabled: true, 
     //backgroundColor: null, 
     borderWidth: 0, 
     shadow: false, 
     formatter: function() { 
      var value = '<div style="background-color:red;"><span><b>Market Performance<span style=\'padding-left:50px\'>' + this.x + '</span></b><br/> ' + this.series.name + '$' + this.y + '</span><div>'; 
      return value; 

     }, 
}, 

我想刀尖背景顏色是一系列color.Also請建議我如何填寫股利是因爲圖像中所示的股利是成功的一半充滿紅色。提前感謝。

+0

你的意思是這樣的:http://jsfiddle.net/cwnf6a4a/? –

+0

我們是否可以通過像Series這樣的藍色方式實現工具提示,因此整個工具提示是藍色的。系列是黑色的,因此整個工具提示都是黑色的。我已經在下面編輯了Nighisha John答案,您可以在其中找到屏幕截圖。 –

+0

http://jsfiddle.net/s5m0ut0p/似乎意識到您的功能,讓我知道是否是錯誤的。 –

回答

0

更改您的格式化功能到

tooltip: { 
     useHTML: true, 
     enabled: true, 
     backgroundColor: null, 
     borderWidth: 0, 
     shadow: false, 
     formatter: function() { 
      var value = '<div style="background-color:'+ this.series.color+';padding:10px"><span><b>Market Performance<span style=\'padding-left:50px\'>' + this.x + '</span></b><br/> ' + this.series.name + '$' + this.y + '</span><div>'; 
      return value; 
     } 
} 

這裏是例子FIDDLE

enter image description here

enter image description here

0

您需要使用tooltip.formatter定製工具提示和觸發器attr的內容()函數在SVG工具提示元素上。該功能允許操作形狀的屬性。

formatter: function() { 
    var color = this.color; 

    this.series.chart.tooltip.label.attr({ 
     'fill': color 
    }); 

    var value = '<span><b>Market Performance<span style=\'padding-left:50px\'>' + this.x + '</span></b><br/> ' + this.series.name + '$' + this.y + '</span>'; 
    return value; 

    }, 

例子:http://jsfiddle.net/fqcpd32f/