Question

是否可以将onclick方法附加到Google Visualization折线图中的元素？例如，如果用户点击图表中的点，我想将用户发送到包含更多详细信息的页面。我已经完成了整个文档，无法找到如何执行此操作的示例。

我看到有事件的方法（来自documentation），但没有明确的例子，它没有多大意义。

谢谢！

Answer 1

您可以使用“选择”事件执行此操作，每次用户点击折线图上的某个点时都会触发该事件。我在下面列出了一个工作示例，包括带有几个值的重定向。 Google代码游乐场有一个nice example of how to use event handlers on a table - 大多数可视化都可以使用相同类型的功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['barchart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 660);
        data.setValue(2, 2, 1120);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        chart = new google.visualization.LineChart(document.getElementById('visualization'));
        chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                          vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
                         });

        // a click handler which grabs some values then redirects the page
        google.visualization.events.addListener(chart, 'select', function() {
          // grab a few details before redirecting
          var selection = chart.getSelection();
          var row = selection[0].row;
          var col = selection[0].column;
          var year = data.getValue(row, 0);
          location.href = 'http://www.google.com?row=' + row + '&col=' + col + '&year=' + year;
        });

      }
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Answer 2

getSelection（）。列不起作用，返回“未知”值。该问题已发布在Google Visualization API bug reports页面中。

在Google Visualization折线图中创建可点击元素

2 个答案: