当用户单击特定栏时，我尝试使用 Google 的图表 API 触发新的条形图的创建。我想我理解这些概念，并且至少想让 getSelection() 函数正常工作并显示用户单击的栏。但每次，当您单击该栏时，它都会卡住显示并且没有 java 警报。有什么想法吗？
代码如下:
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var visualization = new google.visualization.BarChart(document.getElementById('acctmeta'));
var json_data = new google.visualization.DataTable({{acctmeta_json}});
visualization.draw(json_data, {width: 850, height: 600, title: 'Collection Level Populated Metadata Fields',
chartArea: {width:"50%"},
vAxis: {title: 'Collection Title/ID', titleTextStyle: {color: 'green'}},
hAxis: {logScale:false, title:'Fields Populated', titleTextStyle: {color: 'green'}}
});
// Add our selection handler.
google.visualization.events.addListener(visualization, 'select', selectHandler);
// The selection handler.
// Loop through all items in the selection and concatenate
// a single message from all of them.
function selectHandler() {
alert(data.getValue(chart.getSelection()[0].row, 0));
}
} //end of draw chart function
</script>
最佳答案
只是想知道，该行
alert(data.getValue(chart.getSelection()[0].row, 0));
是
alert(data.getValue(visualization.getSelection()[0].row, 0));
？
这是我的一个工作示例。我必须将数据和图表设置为全局变量:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
var data;
var chart;
function drawChart() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Where');
data.addColumn('number', 'What');
data.addRows([['ABC',87],['ERT',70],['KLJ',38],['UPP',-67],['SSD',27],['UKG',42],['NUS',60],['WEB',96]]);
var options = {'title':'my chart','width':'600','height':'400','is3D':'true'};
chart = new google.visualization.ColumnChart(document.getElementById('test3_chart'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectHandler2);
}
function selectHandler2() {
var selection = chart.getSelection();
alert('That\'s column no. '+selection[0].row);
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id=test3_chart>Please wait...</div>
</body>
</html>
关于google-visualization - getSelection() 从 Google Chart API 中的行获取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7337714/