javascript Google Charts BarChart OnClick 或 OnSelect
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21098406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Charts BarChart OnClick or OnSelect
提问by kaulainais
The code creates Google Charts Bar chart with 2 columns.
该代码创建了具有 2 列的 Google Charts 条形图。
<?php
$sth = mysql_query("select * from table");
$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'Stats', 'type' => 'string'),
array('label' => 'Value', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth))
{
$temp = array();
$temp[] = array('v' => (string) $r['Stats']);
$temp[] = array('v' => (int) $r['Value']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var options = {
legend: {position: 'none'},
bar: {groupWidth: "85%"},
colors:['#4A9218'],
hAxis: {
viewWindowMode: 'explicit',
viewWindow: {
max: 400,
min: 0,
},
gridlines: {
count: 10,
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<!--this is the div that will hold the pie chart-->
<div id="chart_div" style="width:100%; height:200px"></div>
the Output is simple Barchart, that feed data from MySQL. Is it possible an how to:
输出是简单的条形图，它从 MySQL 提供数据。是否有可能如何：
1)To change Bar color when selected
2)To change/populate seperate <div></div> content value regarding on selected Bar
For example You click on Bar with value "3"(its dynamic). The Bar change color to red. DIV element below shows value "3"
例如，您单击值为“3”（其动态）的 Bar。Bar 将颜色更改为红色。下面的 DIV 元素显示值“3”
回答by asgallant
Yes, you can do that by adding in a 'select'event handler that gets the data from your DataTable, updates your div with the value, sets the color of the bar via a 'style'role column in a DataView, and redraws the chart using the view. Here's an example:
是的，您可以通过添加一个'select'事件处理程序来实现这一点，该处理程序从您的 DataTable 中获取数据，使用该值更新您的 div，通过'style'DataView 中的角色列设置栏的颜色，并使用视图重新绘制图表。下面是一个例子：
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length) {
var row = selection[0].row;
document.querySelector('#myValueHolder').innerHTML = data.getValue(row, 1);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'style',
calc: function (dt, i) {
return (i == row) ? 'color: red' : null;
}
}]);
chart.draw(view, options);
}
});
See it working here: http://jsfiddle.net/asgallant/kLL2s/
看到它在这里工作：http: //jsfiddle.net/asgallant/kLL2s/
