有什麼方法可以更改Plot.ly上的標籤顏色JavaScript

在使用Plotly（https://plot.ly/javascript/）生成的JSBin鏈接中的圖形上，當您將鼠標懸停在條形圖「條」上時，顯示與每個小節相關聯的值 - 但是文本顏色對應於小節設置的顏色，如果是淺色，則不可讀。有什麼方法可以更改Plot.ly上的標籤顏色JavaScript

https://jsbin.com/vubahafasu/edit?html,js,output

所以基本上，當長頸鹿欄項目懸停，是有可能改變顯示「SF動物園」的懸停值的顏色或BGCOLOR？

來源

2016-01-22 mattbee

您可以使用plotly_hover事件，選擇顯示文本並更改其填充顏色的rect。 rect的類別爲hovertext，並且通過使用D3的filter方法，您可以選擇要應用修改的索引。

document.getElementById("myDiv").on("plotly_hover", function (data) { 
data.points.map(function() { 
    var hovertext = Plotly.d3.selectAll(".hovertext"); 
    hovertext.filter(function (d, i) { 
     return i === 0; 
    }).selectAll("rect").style("fill", "rgb(255, 0, 0)"); 
});

}）;

var trace1 = { 
 
    x: ['giraffes', 'orangutans', 'monkeys'], 
 
    y: [20, 14, 23], 
 
    name: 'SF Zoo', 
 
    type: 'bar', 
 
    marker: { 
 
    color: '#e9e9e9' 
 
    } 
 
}; 
 

 
var trace2 = { 
 
    x: ['giraffes', 'orangutans', 'monkeys'], 
 
    y: [12, 18, 29], 
 
    name: 'LA Zoo', 
 
    type: 'bar' 
 
}; 
 

 
var data = [trace1, trace2]; 
 

 
var layout = {barmode: 'group'}; 
 

 
Plotly.newPlot('myDiv', data, layout); 
 

 
document.getElementById('myDiv').on('plotly_hover', function(data){ 
 
    var infotext = data.points.map(function(d){ 
 
    var hovertext = Plotly.d3.selectAll(".hovertext"); 
 
    hovertext.filter(function(d, i) {return i === 0; }).selectAll('rect').style("fill" , "rgb(255, 0, 0)"); 
 
    }); 
 
});

<head> 
 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div> 
 
</body>

來源

2016-12-02 17:33:00

完美的 - 就像一個魅力： https://jsbin.com/pedaki/edit?html,js,output – mattbee

有什麼方法可以更改Plot.ly上的標籤顏色JavaScript

回答

相關問題