Question

我正在尝试将事件挂钩到Google Sankey图表上。 Events声明包含select但不会在Chrome或Safari上触发。如果事件在下面的代码中切换，onmouseover / onmouseout / ready似乎被连接起来 - 我在控制台日志中得到了一些东西。那就是换行：

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

到

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

显示事件监听器已连接。

我在其他较新的图表类型上尝试了此操作，例如字树和选择已连接。我错过了什么？

E.g。

<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

我认为这里的问题是您正在为返回对象的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

最佳答案对我不起作用。但是，将 link interactivity 设置为true可以解决问题。

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

选择未在Google图表API上为Sankey触发的事件

2 个答案: