Question

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

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

基本上，当悬停Giraffes Bar项目时，是否可以更改＆＃34; SF Zoo＆＃34;的悬停值的颜色或bgcolor。那显示了吗？

Answer 1

您可以使用plotly_hover事件，选择显示文字的rect并更改其填充颜色。 hovertext的类是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)"); });，通过使用D3的filter方法，您可以选择要应用修改的索引。

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>

  var features = [
    {
      position: new google.maps.LatLng(41.404998, 2.210517),
      type: 001
      //Barcelona 1
    }, {
      position: new google.maps.LatLng(41.404371, 2.179131),
      type: 002
      //Barcelona 2
    }
  ];




   function addMarker(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });

    var infowindow = new google.maps.InfoWindow()

    var content  = "" + feature.type

    google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
      return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
      };
    })(marker,content,infowindow)); 

  }

有没有办法在Plot.ly JavaScript

1 个答案: