javascript – Google Charts BarChart OnClick或OnSelect

2019-07-28 18:16:14 阅读：196 来源： 互联网

标签：javascript mysql google-visualization

该代码创建了包含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”

解决方法:

是的,您可以通过添加“select”事件处理程序来实现这一点,该处理程序从DataTable获取数据,使用值更新div,通过DataView中的“style”角色列设置栏的颜色,然后重绘使用视图的图表.这是一个例子：

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/

标签：javascript,mysql,google-visualization
来源： https://codeday.me/bug/20190728/1564085.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Google Charts BarChart OnClick或OnSelect