Question

我需要通过Gauge处理onclick事件。我没有在Google Chart文档上找到关于Gauges上的注册事件的示例。

我尝试了以下内容：

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart","gauge"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'LABEL');
                data.addColumn('number', 'TOTAL');
                data.addRows(1);
                data.setValue(0, 0, 'Speed');
                data.setValue(0, 1, 240);
                var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
                var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
                gauge.draw(data, gaugeOptions);
                google.visualization.events.addListener(gauge, 'select', function() {
                    alert("Here");
                });
            }
        </script>
    </head>
    <body>
        <div id="gauge_div"></div>
    </body>
</html>

此外，我尝试使用JQuery将onclick事件添加到div“gauge_div”，但只有当我点击div的边框而不是超过标尺时，它才有效。

Answer 1

Gauge没有触发的事件。图表在iframe中呈现，iframe在本地dom中也没有click事件，而是在iframe的window.document.body中。我使用的解决方案是创建一个相对位于仪表顶部的空div，并在其上注册click事件。

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart","gauge"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'LABEL');
                data.addColumn('number', 'TOTAL');
                data.addRows(1);
                data.setValue(0, 0, 'Speed');
                data.setValue(0, 1, 240);
                var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
                var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
                gauge.draw(data, gaugeOptions);
                google.visualization.events.addListener(gauge, 'select', function() {
                    alert("Here");
                });
            }
        </script>
    </head>
    <body style="position:relative;">
        <div id="gauge_div"></div>
        <div id="gauge_div_clickable" style="position:absolute;z-index:2;top:- 120px;width:120px;height:120px;" onclick="alert('here');">
    </body>
</html>

Answer 2

使用jQuery可以使用nth-child selector这样的东西......

$( "#gauge_div td:nth-child(2)" ).click(function() {
    var tData = data.getValue(1,0);
    alert( "Handler for .click() called."+ tDate);
});

假设您的仪表数据保存在名为“data”的变量中，您将调用第二个子项，正确的数据行将为行“1”，因为它将从0开始。

即0 = 1,1 = 2,2 = 3,3 = 4，......

Answer 3

要获得可点击量表，请添加此javascript：

$('#gauge_div').find('iframe')).each(function(elt, idx) {
   $(elt).contents().find('body').click(function (event) {
      // gauge.getSelection() does not exists so we emulate its result:
      var selection = [{'row': idx}];
      common_onclick_callback(selection);
   });
});

哪些功能：

distinct gauge onclick（适用于多个仪表，并识别它们）
快速gauge.getSelection()结果模拟的示例，如果您想重新使用已经为其他Google图表类型编写的onclick回调，这可能会有所帮助。

这是因为：

每个iframe都会将事件挂钩在body中（否则onclick事件未被触发）
每个onclick回调都会获得与其在HTML中的位置相关的适当索引idx。

此示例使用：

jquery，映射到$，并提供选择器和find，contents方法
下划线，映射到_，并提供each设施

但这两种都是可选的但很方便。

Answer 4

我从CrandellWS的回答开始，但最终得到了以下内容，这更简单：

$('#gauge_div td').click(function() {
   alert(data.getValue(this.cellIndex,0));
});

如何将onclick事件添加到Google Chart的Gauge？

4 个答案: