有什么办法可以改变 Plot.ly JavaScript 上标签的颜色

Question

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

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

所以基本上，当悬停长颈鹿栏项目时，是否可以更改显示的 "SF Zoo" 悬停值的颜色或 bgcolor？

Answer 1

您可以使用 plotly_hover 事件，select rect 显示文本并更改其填充颜色。 rect 的 class 是 hovertext，通过使用 D3 的 filter 方法，您可以 select 应用修改的索引。

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 上标签的颜色

Is there any way to change the color of the label on a Plot.ly JavaScript

javascript

bar-chart

plotly