个人中心
gpt4 book ai didi

javascript - google.visualization.ChartWrapper 组列 View

转载 作者：行者123 更新时间：2023-11-29 19:43:02 25 4
gpt4 key购买 nike

我是 Google 可视化 API 的新手，而且我对 JavaScript 不是很熟悉。

我希望我的输出执行的操作是按第 2 列中的标签进行分组。请注意，纽约在图表上重复出现。我只想让图表按标签对第 2 列进行分组，然后对第 3 列中的数值求和。有人知道怎么做吗？

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

output

最佳答案

要完成这项工作，您需要一个中间可视化来充当仪表板中的代理(我通常为此使用表格)。仪表板将代理绑定(bind)到您的控件(而不是将您的图表绑定(bind)到控件)。在代理的“就绪”事件处理程序中，您需要聚合代理的数据并使用聚合数据绘制图表。这是一个例子:

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});

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

关于javascript - google.visualization.ChartWrapper 组列 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21815448/

25 4 0
文章推荐： javascript - 将类添加到奇数和偶数表类以将它们左右浮动
文章推荐： javascript - 如何使用 gulpjs 编译 compass sass
文章推荐： javascript - 背景 svg 元素上的 mouseenter 事件
文章推荐： javascript - extjs triggerfield 不会触发模糊
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com