谷歌图表中的链接视图

Linked views in Google Charts

本文关键字：链接 视图 谷歌      更新时间：2024-03-12

我正试图在谷歌图表中创建一个链接视图。链接视图选择可视化的一部分，比如说在饼图中，而在链接视图（比如条形图）中也选择（或高亮显示）了这一部分。我是谷歌图表的新手，我也不知道如何使用JavaScript。我从谷歌文档中提取了代码，并对其进行了一些修改。但它似乎不起作用。代码如下：

<!DOCTYPE HTML>
<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
      google.setOnLoadCallback(drawChart2);
      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);
        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        var chart2 = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
      function drawChart2() {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);
        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

您需要使用"select"事件处理程序将两个图表链接在一起，如下所示：

function drawChart() {
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
    ]);
    // Set chart options
    var options = {
        title: 'How Much Pizza I Ate Last Night',
        width: 400,
        height: 300
    };
    // Instantiate and draw our chart, passing in some options.
    var chart1 = new google.visualization.PieChart(document.getElementById('chart_div_1'));
    var chart2 = new google.visualization.BarChart(document.getElementById('chart_div_2'));
    // set up event handlers
    // when a user clicks on the PieChart, set the selection on the BarChart
    google.visualization.events.addListener(chart1, 'select', function () {
        var selection = chart1.getSelection();
        for (var i = 0; i < selection.length; i++) {
            // add in column information to specify selection in BarChart
            selection[i].column = 1;
        }
        chart2.setSelection(selection);
    });
    // when a user clicks on the BarChart, set the selection on the PieChart
    google.visualization.events.addListener(chart2, 'select', function () {
        var selection = chart2.getSelection();
        for (var i = 0; i < selection.length; i++) {
            // remove column information for selection in PieChart
            selection[i].column = null;
        }
        chart1.setSelection(selection);
    });
    chart1.draw(data, options);
    chart2.draw(data, options);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

HTML中需要两个div，每个图表一个：

<div id="chart_div_1"></div>
<div id="chart_div_2"></div>

请参阅此处的工作示例：http://jsfiddle.net/asgallant/S78sB/

相关文章：