irw*_*inj 2 javascript google-visualization dom-events
我正试图将事件挂钩到Google Sankey图表上.该活动要求,包括选择,但它不会触发Chrome或Safari.如果事件在下面的代码中切换,onmouseover/onmouseout/ready似乎被连接起来 - 我在控制台日志中得到了一些东西.那就是换行:
google.visualization.events.addListener(chart, 'select', selectHandler);
Run Code Online (Sandbox Code Playgroud)
至
google.visualization.events.addListener(chart, 'onmouseover', selectHandler);
Run Code Online (Sandbox Code Playgroud)
显示事件侦听器已连接.
我在其他较新的图表类型上尝试了这一点,如字树和选择已连接.我错过了什么?
例如
<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>
Run Code Online (Sandbox Code Playgroud)
您必须设置正确的选项:
// Sets chart options.
var options = {
width: 600,
sankey: {
node: {
interactivity: true
}
}
};
Run Code Online (Sandbox Code Playgroud)
我用这个例子https://jsfiddle.net/5mvx6bdr/ 完美的工程:)
sankey:node:interactive是false默认值.
| 归档时间: |
|
| 查看次数: |
1202 次 |
| 最近记录: |