有没有办法在Plot.ly JavaScript上更改标签的颜色

Question

在下面的JSBin链接中，使用Plotly（ https://plot.ly/javascript/ ）生成的图表，当您将鼠标悬停在条形图“条形图”上时，会显示与每个条形图相关联的值 - 但是文本颜色对应于条设置的颜色，如果是浅色则不可读。

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

基本上，当悬停Giraffes Bar项目时，是否可以更改显示的“SF Zoo”悬停值的颜色或bgcolor？

Answer 1

您可以使用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>

有没有办法在Plot.ly JavaScript上更改标签的颜色

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-12-02 17:33:00

有没有办法在Plot.ly JavaScript上更改标签的颜色

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-12-02 17:33:00

解决方案1
3 已采纳 2016-12-02 17:33:00