javascript - Google Charts BarChart OnClick 或 OnSelect

Question

代码创建具有 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>

输出是简单的条形图，从 MySQL 提供数据。是否有可能如何:

 1)To change Bar color when selected
 2)To change/populate seperate <div></div> content value regarding on selected Bar 

例如，您单击值为“3”(其动态)的栏。条形变为红色。下面的 DIV 元素显示值“3”

Answer 1

是的，您可以通过添加一个 'select' 事件处理程序来做到这一点，该事件处理程序从您的 DataTable 中获取数据，用该值更新您的 div，通过 设置栏的颜色>'style' 作用于DataView 中的列，并使用 View 重绘图表。这是一个例子:

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);
    }
});

在这里查看它的工作情况:http://jsfiddle.net/asgallant/kLL2s/