google.visualization.ChartWrapper组列视图

本文介绍了google.visualization.ChartWrapper组列视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是使用Google可视化API的新手，另外我对JavaScript并不熟悉。

我希望我的输出结果是按照第2列中的标签进行分组。请注意，图表上重复了纽约。我只想让图表按标签对第2列进行分组，并对第3列中的数字进行求和。是否有人知道如何？

  < html xmlns =http://www.w3.org/1999/xhtml> 
< head> 
< meta http-equiv =content-typecontent =text / html; charset = utf-8/> 
< title> 
 Google Visualization API示例
< / title> 
< script type =text / javascriptsrc =// www.google.com/jsapi\">< ;; script> 
< script type =text / javascript> 
 google.load（'visualization'，'1.1'，{packages：['controls']}）; 
< / script> 
< script type =text / javascript> 
函数drawVisualization（）{
 //准备数据
 var data = google.visualization.arrayToDataTable（[
 ['Country'，'Region / State'，'City' ，'人口']，
 ['USA'，'California'，'San Francisco'，776733]，
 ['USA'，'California'，'Los Angeles'，3694820]，
 ['USA'，'California'，'Mountain View'，70708]，
 ['USA'，'New York'，'New York'，8175173]，
 ['USA'， 'New York'，'New York'，8175173]，
 ['USA'，'New York'，'Albany'，857592]，
 ['France'，'Ile-de-France' ，'巴黎'，2193031]，
 ['法国'，'法兰西岛'，'奥利'，21372]，
 ['法国'，'普罗旺斯'，'马赛'，852395 ]，
 ['France'，'Provence'，'Nice'，348556] 
]）; 
 
 //为'Country'，'Region / State'和'City'定义类别选择器
 var countryPicker = new google.visualization.ControlWrapper（{$ b $'controlType'： 'CategoryFilter'，
'containerId'：'control1'，
'options'：{$ b $'filterColumnLabel'：'Country'，
'ui'：{
 'labelStacking'：'vertical'，
'allowTyping'：false，
'allowMultiple'：false 
} 
} 
}）; 
 $ b $ var regionPicker = new google.visualization.ControlWrapper（{$ b $'controlType'：'CategoryFilter'，$ b $'containerId'：'control2'，
'options' ：{
'filterColumnLabel'：'Region / State'，
'ui'：{
'labelStacking'：'vertical'，
'allowTyping'：false，
'allowMultiple'：false 
} 
} 
}）; 
 $ b $ var cityPicker = new google.visualization.ControlWrapper（{$ b $'controlType'：'CategoryFilter'，$ b $'containerId'：'control3'，
'options' ：{
'filterColumnLabel'：'City'，
'ui'：{
'labelStacking'：'vertical'，
'allowTyping'：false，
' allowMultiple'：false 
} 
} 
}）; 
 
 //定义条形图以显示'人口'数据
 var barChart = new google.visualization.ChartWrapper（{
'chartType'：'BarChart'，
'containerId'：'chart1'，
'options'：{
'width'：400，
'height'：300，
'chartArea'：{top：0 ，right：0，bottom：0} 
}，
 //将条形图配置为使用列2（城市）和3（人口）
'view'：{'columns'：[ 2，3]} 
}）; 
 
 //创建仪表板。 
 new google.visualization.Dashboard（document.getElementById（'dashboard'））。 
 //配置控件，使得：
 //  - 'Country'选择驱动'Region'one，
 //  - 'Region'选项驱动'City' 
 //  - 最后，'City'输出驱动图表
 bind（countryPicker，regionPicker）。 
绑定（regionPicker，cityPicker）。 
绑定（cityPicker，barChart）。 
 //绘制仪表板
 draw（data）; 
} 
 
 
 google.setOnLoadCallback（drawVisualization）; 
< / script> 
< / head> 
< body style =font-family：Arial; border：0 none;> 
< div id =dashboard> 
< table> 
< tr style ='vertical-align：top'> 
< td style ='width：300px; font-size：0.9em;'> 
< div id =control1>< / div> 
< div id =control2>< / div> 
< div id =control3>< / div> 
< / td> 
< td style ='width：600px'> 
< div style =float：left; ID = chart1 >< / DIV> 
< div style =float：left; ID = chart2 >< / DIV> 
< div style =float：left; ID = chart3 >< / DIV> 
< / td> 
< / tr> 
< / table> 
< / div> 
< / body> 
< / html>

解决方案

要做到这一点，您需要一个中间可视化来充当仪表板中的代理我通常用这个表）。仪表板将代理绑定到您的控件（而不是将您的图表绑定到控件）。在代理的准备就绪事件处理程序中，您需要汇总代理的数据并使用汇总数据绘制图表。这里有一个例子：

$ $ p $ function drawVisualization（）{ //准备数据 var data = google .visualization.arrayToDataTable（[ ['Country'，'Region / State'，'City'，'Population']， ['USA'，'California'，'San Francisco'，776733] ， ['USA'，'California'，'Los Angeles'，3694820]， ['USA'，'California'，'Mountain View'，70708]， ['USA纽约'，'纽约'，8175173]， ['USA'，'纽约'，'纽约'，8175173]， ['USA'，'纽约' ，'奥尔巴尼'，857592]， ['法国'，'法兰西岛'，'巴黎'，2193031]， ['法国'，'法兰西岛'，'奥利'，21372]， ['法国'，'普罗旺斯'，'马赛'，852395]， ['法国'，'普罗旺斯'，'好'，348556] ] ）; //为'Country'，'Region / State'和'City'定义类别选择器 var countryPicker = new google.visualization.ControlWrapper（{$ b $'controlType'： 'CategoryFilter'， 'containerId'：'control1'， 'options'：{$ b $'filterColumnLabel'：'Country'， 'ui'：{ 'labelStacking'：'vertical'， 'allowTyping'：false， 'allowMultiple'：false } } }）; $ b $ var regionPicker = new google.visualization.ControlWrapper（{$ b $'controlType'：'CategoryFilter'，$ b $'containerId'：'control2'， 'options' ：{ 'filterColumnLabel'：'Region / State'， 'ui'：{ 'labelStacking'：'vertical'， 'allowTyping'：false， 'allowMultiple'：false } } }）; $ b $ var cityPicker = new google.visualization.ControlWrapper（{$ b $'controlType'：'CategoryFilter'，$ b $'containerId'：'control3'， 'options' ：{ 'filterColumnLabel'：'City'， 'ui'：{ 'labelStacking'：'vertical'， 'allowTyping'：false， ' allowMultiple'：false } } }）; //定义条形图以显示'人口'数据 var barChart = new google.visualization.ChartWrapper（{ 'chartType'：'BarChart'， 'containerId'：'chart1'， 'options'：{ 'width'：400， 'height'：300， 'chartArea'：{top：0 ，right：0，bottom：0} }， //将条形图配置为使用列2（城市）和3（人口） 'view'：{'columns'：[ 2，3]} }）; $ b $ var proxyTable = new google.visualization.ChartWrapper（{ chartType：'Table'， containerId：'proxyTable'， options：{ //最小化表格在HTML 页面中的占用空间：'enable'， pageSize：1 }， view：{ columns：[0] } }）; //为proxyTable创建一个ready事件处理程序处理数据聚合和绘图barChart google.visualization.events.addListener（proxyTable，'ready'，function（）{ var dt = proxyTable.getDataTable（）; var groupedData = google.visualization.data.group（dt，[0，1，2]，[{ 列：3，键入：'number'， label：dt.getColumnLabel（3）， aggregation：google.visualization.data.sum }]）; //分组后，数据将按列0进行排序，然后是1，然后是2 //如果您想要不同的订单，则必须重新对进行排序barChart.setDataTable（groupedData）; barChart.draw （）; }）; //创建仪表板。 new google.visualization.Dashboard（document.getElementById（'dashboard'））。 //配置控件，使得： // - 'Country'选择驱动'Region'one， // - 'Region'选项驱动'City' // - 最后城市输出驱动代理表绑定（countryPicker，regionPicker）。绑定（regionPicker，cityPicker）。绑定（cityPicker，proxyTable）。 //绘制仪表板 draw（data）; } google.load（'visualization'，'1'，{packages：['corechart'，'controls'，'table']，callback：drawVisualization}）;

请参阅此处的示例：

I am new using Google visualisation API plus I am not very familiar with JavaScript.

What I want my output to do is to group by labels from column 2. Notice that New York is repeated on the chart. I would just want the chart to group column 2 by label and sum the numeric values in column 3. Does anybody know how?

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['controls']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Prepare the data
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Region/State', 'City', 'Population'],
          ['USA', 'California', 'San Francisco', 776733],
          ['USA', 'California', 'Los Angeles', 3694820],
          ['USA', 'California', 'Mountain View', 70708],
          ['USA', 'New York', 'New York', 8175173],
          ['USA', 'New York', 'New York', 8175173],
          ['USA', 'New York', 'Albany', 857592],
          ['France', 'Ile-de-France', 'Paris', 2193031],
          ['France', 'Ile-de-France', 'Orly', 21372],
          ['France', 'Provence', 'Marseille', 852395],
          ['France', 'Provence', 'Nice', 348556]
        ]);

        // Define category pickers for 'Country', 'Region/State' and 'City'
        var countryPicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control1',
          'options': {
            'filterColumnLabel': 'Country',
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
          }
        });

        var regionPicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control2',
          'options': {
            'filterColumnLabel': 'Region/State',
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
          }
        });

        var cityPicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control3',
          'options': {
            'filterColumnLabel': 'City',
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
          }
        });

        // Define a bar chart to show 'Population' data
        var barChart = new google.visualization.ChartWrapper({
          'chartType': 'BarChart',
          'containerId': 'chart1',
          'options': {
            'width': 400,
            'height': 300,
            'chartArea': {top: 0, right: 0, bottom: 0}
          },
          // Configure the barchart to use columns 2 (City) and 3 (Population)
          'view': {'columns': [2, 3]}
        });

        // Create the dashboard.
        new google.visualization.Dashboard(document.getElementById('dashboard')).
          // Configure the controls so that:
          // - the 'Country' selection drives the 'Region' one,
          // - the 'Region' selection drives the 'City' one,
          // - and finally the 'City' output drives the chart
          bind(countryPicker, regionPicker).
          bind(regionPicker, cityPicker).
          bind(cityPicker, barChart).
          // Draw the dashboard
          draw(data);
      }


      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="dashboard">
      <table>
        <tr style='vertical-align: top'>
          <td style='width: 300px; font-size: 0.9em;'>
            <div id="control1"></div>
            <div id="control2"></div>
            <div id="control3"></div>
          </td>
          <td style='width: 600px'>
            <div style="float: left;" id="chart1"></div>
            <div style="float: left;" id="chart2"></div>
            <div style="float: left;" id="chart3"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

解决方案

To make this work, you need an intermediary visualization to act as a proxy in the Dashboard (I typically use a Table for this). The Dashboard binds the proxy to your controls (instead of binding your chart to the controls). In a "ready" event handler for the proxy, you need to aggregate the proxy's data and use the aggregated data to draw your chart. Here's an example:

function drawVisualization() {
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Region/State', 'City', 'Population'],
        ['USA', 'California', 'San Francisco', 776733],
        ['USA', 'California', 'Los Angeles', 3694820],
        ['USA', 'California', 'Mountain View', 70708],
        ['USA', 'New York', 'New York', 8175173],
        ['USA', 'New York', 'New York', 8175173],
        ['USA', 'New York', 'Albany', 857592],
        ['France', 'Ile-de-France', 'Paris', 2193031],
        ['France', 'Ile-de-France', 'Orly', 21372],
        ['France', 'Provence', 'Marseille', 852395],
        ['France', 'Provence', 'Nice', 348556]
    ]);

    // Define category pickers for 'Country', 'Region/State' and 'City'
    var countryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control1',
        'options': {
            'filterColumnLabel': 'Country',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false
            }
        }
    });

    var regionPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnLabel': 'Region/State',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false
            }
        }
    });

    var cityPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control3',
        'options': {
            'filterColumnLabel': 'City',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false
            }
        }
    });

    // Define a bar chart to show 'Population' data
    var barChart = new google.visualization.ChartWrapper({
        'chartType': 'BarChart',
        'containerId': 'chart1',
        'options': {
            'width': 400,
            'height': 300,
            'chartArea': {top: 0, right: 0, bottom: 0}
        },
        // Configure the barchart to use columns 2 (City) and 3 (Population)
        'view': {'columns': [2, 3]}
    });

    var proxyTable = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'proxyTable',
        options: {
            // minimize the footprint of the table in HTML
            page: 'enable',
            pageSize: 1
        },
        view: {
            columns: [0]
        }
    });

    // create a "ready" event handler for proxyTable the handles data aggregation and drawing barChart
    google.visualization.events.addListener(proxyTable, 'ready', function () {
        var dt = proxyTable.getDataTable();
        var groupedData = google.visualization.data.group(dt, [0, 1, 2], [{
            column: 3,
            type: 'number',
            label: dt.getColumnLabel(3),
            aggregation: google.visualization.data.sum
        }]);
        // after grouping, the data will be sorted by column 0, then 1, then 2
        // if you want a different order, you have to re-sort
        barChart.setDataTable(groupedData);
        barChart.draw();
    });

    // Create the dashboard.
    new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Configure the controls so that:
    // - the 'Country' selection drives the 'Region' one,
    // - the 'Region' selection drives the 'City' one,
    // - and finally the 'City' output drives proxyTable
    bind(countryPicker, regionPicker).
    bind(regionPicker, cityPicker).
    bind(cityPicker, proxyTable).
    // Draw the dashboard
    draw(data);
}
google.load('visualization', '1', {packages:['corechart', 'controls', 'table'], callback: drawVisualization});

See working example here: http://jsfiddle.net/asgallant/MebSS/

这篇关于google.visualization.ChartWrapper组列视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！