1

使用此 API： https ://developers.google.com/chart/interactive/docs/gallery/sankey

我想做一个桑基图。当鼠标悬停在链接上而不影响其他链接时，有什么方法可以更改链接的颜色？那么，默认情况下它们是灰色的，然后当鼠标悬停在一个链接上时，那个单独的链接会变成蓝色而其他链接会保持灰色？

4

2 回答 2

1

对于那些支持 svg 的浏览器，以下 css 将为图表启用悬停行为：

svg path:hover {
    fill: red;
}


google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'From');
  data.addColumn('string', 'To');
  data.addColumn('number', 'Weight');
  data.addRows([
    ['A', 'X', 5],
    ['A', 'Y', 7],
    ['A', 'Z', 6],
    ['B', 'X', 2],
    ['B', 'Y', 9],
    ['B', 'Z', 4],
  ]);

  // Set chart options
  var options = {
    width: 600,
  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
  chart.draw(data, options);
}
svg path:hover {
  fill: red;
}
<html>

<head>
  <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['sankey']}]}">
  </script>
</head>

<body>
  <div id="sankey_basic" style="width: 900px; height: 300px;"></div>
</body>

</html>

这使用了与:hover其他 css 相同的内容，并解决了 svg 中的path元素，svg并使用了 svg 属性fill与您选择的颜色相结合。如果图表更复杂（有其他我们不想添加:hover的路径元素，我们必须使选择器更具体。

于 2014-04-03T03:38:51.370 回答
1

如果要突出显示选定端的所有路径，可以尝试以下操作：

svg path:not([fill-opacity])
    {
         fill: red;
    }

这会将通常完全不透明的所有路径涂成红色，即突出显示的路径。Jason Aller 扩展了 jsfiddle，效果在这里：http: //jsfiddle.net/6bfpcv ​​9g/

于 2015-03-13T12:35:55.297 回答