Question

我正在尝试在Google Chart中创建链接视图。链接视图选择可视化的一部分是什么，让我们说在饼图中，并在链接视图中选择（或突出显示）相同的视图，这就是条形图。我是Google Charts的新手，我也不知道如何使用JavaScript。我从Google Documentation中选取了代码并对其进行了一些修改。但它似乎没有用。代码如下：

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

Answer 1

您需要使用“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/

Google图表中的关联视图

1 个答案: