2015-02-05 65 views
0

我使用dimple.js來繪製標準條形圖,並且能夠更改工具提示框和條形的顏色,但會彈出時彈出的x,y幫助線的顏色你鼠標懸停酒吧仍然是原來的顏色,我不知道如何改變它們。更改Dimple.js工具提示幫助線的顏色

+0

你能舉一個JSBin或其他服務你如何設置圖表和改變顏色的其他服務的例子嗎? – ne8il 2015-02-06 17:41:42

+0

這是我的小提琴https://jsfiddle.net/CatherineRichards/xbL6pns8/9/ – CatherineRichards 2015-02-13 18:06:34

回答

0

這是一個棘手的問題,因爲它不被Dimple支持。沒有適用於這些行的類,因此您無法使用css的類名來定位它們(​​其他工具提示對象確實有類名,但是線元素與這些類名是分開的)。這裏的提示HTML是什麼樣子,以供參考:

tooltip markup

,首先<line>元素是我們想要的。我發現了兩個可行的選項,但它們都是黑客。

1)使用CSS瞄準線 - 工具提示添加爲<g>組中的SVG一切後,這樣你就可以尋找該組中的第一行元素(S):

svg > g:last-of-type > line { 
    stroke: lightgrey !important; 
     opacity: 0.55 !important; 
} 

這僅適用於您爲每個元素更改線條的特定用例 - 如果它們不同,則它不依賴於條紋的顏色。

2)線條最初通過查看酒吧的fill屬性獲得它們的顏色 - 即使您以後用CSS遮罩它,它仍然是最初設置的。所以你可以做的一件事就是覆蓋原來的顏色(因爲無論如何你都會掩蓋它)。

myChart.addSeries("Cancer", dimple.plot.bar); 
myChart.defaultColors = [ 
    new dimple.color("lightgrey") 
]; 

除此之外,我想不出一種方式來獲得線只匹配只在CSS中指定的顏色,沒有在庫中的變化。 (或者編寫你自己的工具提示功能)。

+0

這是偉大的@ ne8il。謝謝! – CatherineRichards 2015-02-19 21:23:59