问

Google Charts BarChart OnClick或OnSelect

烟台中海地产有限公司往发布于 2023-02-03 10:50

char

该代码创建了包含2列的Google Charts条形图.

 '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);
?>

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

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

例如,单击条形图,其值为"3"(动态).条形图将颜色更改为红色.下面的DIV元素显示值"3"

1 个回答

是的,您可以通过添加'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);
    }
});

看到它在这里工作:http://jsfiddle.net/asgallant/kLL2s/

2023-02-03 10:52 回答

嘻嘻哈哈的二狗子

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签