当前位置：文江博客话题详情

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

发布于 2024-11-19 07:39:11 字数 263 浏览 1 评论 0原文

是否可以将 onclick 方法附加到 Google 可视化折线图中的元素？例如，如果用户单击图表中的点，我想将用户发送到包含更多详细信息的页面。我已经浏览了所有文档，但找不到如何执行此操作的示例。

我看到有一些事件方法（来自文档）但没有明确的例子，这没有多大意义。

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

简单爱 2024-11-26 07:39:11

您可以使用“选择”事件来执行此操作，每次用户单击折线图上的点时都会触发该事件。我在下面提供了一个工作示例，其中包括带有几个值的重定向。 Google Code Playground 有一个很好的示例，介绍了如何在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>

You can do this using a 'select' event, which will be triggered each time a user clicks on a point on the line chart. I've included a working example below, including the redirect with a couple of values. The Google code playground has a nice example of how to use event handlers on a table - the same type of functionality can be used across most of the visualizations.

<!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>

回复收藏 0 原文