Select Sankey 的 Google 图表 API 上未触发事件

Question

我正在尝试将事件与单击 Google Sankey 图挂钩。 Events 声称包含 select 但它不会在 Chrome 或 Safari 上触发。 onmouseover/onmouseout/ready 如果在下面的代码中切换了事件，似乎会被连接起来——我在控制台日志中得到了一些东西。即切换线路：

google.visualization.events.addListener(chart, 'select', selectHandler);

至

google.visualization.events.addListener(chart, 'onmouseover', selectHandler);

显示事件侦听器已连接。

我已经在其他较新的图表类型（如单词树）上尝试过此操作，并且 select 已连接。我错过了什么？

例如

<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'</script>   
<script type='text/javascript'>

google.load('visualization', '1.1', {packages:['sankey']});
google.setOnLoadCallback(drawChart);      
function drawChart() {
    var data = new google.visualization.DataTable();
        data.addColumn('string', 'A');
        data.addColumn('string', 'B');
        data.addColumn('number', 'Mails');
        data.addRows([
            ['from elvis','frank', 285],
            ['frank', 'to wendy', 61],
        ]);
   var options = {width: 600};
   var chart = new google.visualization.Sankey(document.getElementById('thechart'));        

google.visualization.events.addListener(chart, 'select', selectHandler);

function selectHandler() {
    console.log('You selected ' + JSON.stringify(chart.getSelection()));
};

chart.draw(data, options);  
} 
</script>
</head>
<body>
<div id='thechart' style='width: 600px; height: 300px;'></div>  
</body>
</html>

Answer 1

我认为这里的问题是您正在为 returns 一个对象的 Sankey 图表事件使用 getSelection 方法。该对象包含您单击的图表中的节点，但您需要以正确的方式查询该对象以提取此信息。我认为不可能像上面问题中尝试的那样在一行中做事。

当我遇到同样的问题时，这对我有用：

google.visualization.events.addListener(chart, 'select', function(){
var selection = chart.getSelection();
for(var key in selection) {
        var value = selection[key];
    console.log(value.name);    
    }   
alert('you selected '+value.name);
});

Answer 2

您必须设置正确的选项：

 // Sets chart options.
 var options = {
        width: 600,
        sankey: {
            node: {
                interactivity: true
            }
        }
    };

我用了这个例子https://jsfiddle.net/5mvx6bdr/ 工作完美:)

sankey: 节点：交互性默认设置为 false。

Answer 3

最上面的答案不适合我。但是，将 link interactivity 设置为 true 就可以了。

var options = {
 sankey: {
   node: {
    interactivity: true,
    colors: this.colors
   },
   link: {
    interactivity: true
   }
  }
}

Select Sankey 的 Google 图表 API 上未触发事件

Select event not fired on Google chart API for Sankey

javascript

google-visualization

dom-events