javascript - Google 可视化分组计算-6ren

javascript - Google 可视化分组计算

转载作者：行者123 更新时间：2023-11-27 23:01:18

我有一个按预期显示的表格，显示团队中的每个人，但我希望图表显示经理级别(团队级别)总统计数据。目前，它显示了每个团队成员的经理姓名，我需要按经理姓名对数据表进行分组，并对“SavedTest”和“MissedTest”数字求和，然后计算它们的百分比。在 PERC 列下。我看过很多文章和操作方法，但它们都只展示了如何进行单列计算而不是倍数计算。

JSFiddle Example Here

 google.charts.load('current', { packages: ['table','corechart'] });

google.charts.setOnLoadCallback(GetChartData);

 function GetChartData() {
var jsonData = {
  "cols": [
    {
      "type": "string",
      "id": "Division",
      "label": "Division"
    },
    {
      "type": "string",
      "id": "ManagerName",
      "label": "ManagerName"
    },
    {
      "type": "string",
      "id": "TechName",
      "label": "TechName"
    },
    {
      "type": "string",
      "id": "TechID",
      "label": "TechID"
    },
    {
      "type": "string",
      "id": "CableMonth",
      "label": "CableMonth"
    },
    {
      "type": "string",
      "id": "CableYear",
      "label": "CableYear"
    },
    {
      "type": "number",
      "id": "SavedTest",
      "label": "SavedTest"
    },
    {
      "type": "number",
      "id": "MissedTest",
      "label": "MissedTest"
    },
    {
      "type": "number",
      "id": "Perc",
      "label": "Perc"
    },
    {
      "type": "string",
      "id": "ManagerUserName",
      "label": "ManagerUserName"
    }
  ],
  "rows": [
    {
      "c": [
        {
          "v": "TPA"
        },
        {
          "v": "Bob Dobalina"
        },
        {
          "v": "Mike Hunt"
        },
        {
          "v": "74339"
        },
        {
          "v": "April"
        },
        {
          "v": "2016"
        },
        {
          "v": 35
        },
        {
          "v": 2
        },
        {
          "v": 0.95
        },
        {
          "v": "BDobalina"
        }
      ]
    },
    {
      "c": [
        {
          "v": "TPA"
        },
        {
          "v": "Bob Dobalina"
        },
        {
          "v": "Mike Hunt"
        },
        {
          "v": "74339"
        },
        {
          "v": "February"
        },
        {
          "v": "2016"
        },
        {
          "v": 28
        },
        {
          "v": 6
        },
        {
          "v": 0.82
        },
        {
          "v": "BDobalina"
        }
      ]
    },
    {
      "c": [
        {
          "v": "TPA"
        },
        {
          "v": "Bob Dobalina"
        },
        {
          "v": "Mike Hunt"
        },
        {
          "v": "74339"
        },
        {
          "v": "January"
        },
        {
          "v": "2016"
        },
        {
          "v": 43
        },
        {
          "v": 4
        },
        {
          "v": 0.91
        },
        {
          "v": "BDobalina"
        }
      ]
    },
    {
      "c": [
        {
          "v": "TPA"
        },
        {
          "v": "Bob Dobalina"
        },
        {
          "v": "Mike Hunt"
        },
        {
          "v": "74339"
        },
        {
          "v": "March"
        },
        {
          "v": "2016"
        },
        {
          "v": 45
        },
        {
          "v": 6
        },
        {
          "v": 0.88
        },
        {
          "v": "BDobalina"
        }
      ]
    },
    {
      "c": [
        {
          "v": "TPA"
        },
        {
          "v": "Bob Dobalina"
        },
        {
          "v": "Chris Christianson"
        },
        {
          "v": "72019"
        },
        {
          "v": "April"
        },
        {
          "v": "2016"
        },
        {
          "v": 41
        },
        {
          "v": 2
        },
        {
          "v": 0.95
        },
        {
          "v": "BDobalina"
        }
      ]
    },
    {
      "c": [
        {
          "v": "TPA"
        },
        {
          "v": "Bob Dobalina"
        },
        {
          "v": "Chris Christianson"
        },
        {
          "v": "72019"
        },
        {
          "v": "March"
        },
        {
          "v": "2016"
        },
        {
          "v": 34
        },
        {
          "v": 5
        },
        {
          "v": 0.87
        },
        {
          "v": "BDobalina"
        }
      ]
    },
    {
      "c": [
        {
          "v": "TPA"
        },
        {
          "v": "Bob Dobalina"
        },
        {
          "v": "Robert Bank"
        },
        {
          "v": "80862"
        },
        {
          "v": "May"
        },
        {
          "v": "2016"
        },
        {
          "v": 11
        },
        {
          "v": 5
        },
        {
          "v": 0.69
        },
        {
          "v": "BDobalina"
        }
      ]
    },
    {
      "c": [
        {
          "v": "TPA"
        },
        {
          "v": "Bob Dobalina"
        },
        {
          "v": "Tina Turner"
        },
        {
          "v": "82371"
        },
        {
          "v": "March"
        },
        {
          "v": "2016"
        },
        {
          "v": 42
        },
        {
          "v": 4
        },
        {
          "v": 0.91
        },
        {
          "v": "BDobalina"
        }
      ]
    }
  ]
};



    var data = new google.visualization.DataTable(jsonData);
      var formatter = new google.visualization.NumberFormat({
          fractionDigits: 2,
          suffix: '%'
      });

      formatter.format(data, 8);
      var table = new google.visualization.Table(document.getElementById('table_div'));
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

      table.draw(data, { showRowNumber: true, width: '100%', height: '100%' });


        // Create a view that shows everyone hired since 2007.
      var view = new google.visualization.DataView(data);
      view.hideColumns([0,2,3,4,5,6,7,9]);
      chart.draw(view, { width: 900, height: 900, is3D: true, title: 'Test Bar Chart' });



  }




    function buildGoogleDataView(datar)
    {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Market');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'Tech');
        data.addColumn('string', 'Tech ID');
        data.addColumn('string', 'WO#');
        data.addColumn('string', 'Account');
        data.addColumn('string', 'Date');
        data.addColumn('string', 'Cable Month');
        data.addColumn('string', 'Cable Year');
        data.addColumn('string', 'Manager');
        data.addColumn('int', 'Saved HHC');
        data.addRows(datar.length);
        var row
        for (r = 0; r < datar.length; r++)
        {
            for(c = 0;c<datar[r].length;c++)
            {
                data.setCell(r, c, datar[r][c]);
            }
        }

        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);

        var table = new google.visualization.Table(document.getElementById('table_sort_div'));
        table.draw(view, { width: '100%', height: '100%' });


        var chart = new google.visualization.BarChart(document.getElementById('chart_sort_div'));
        chart.draw(view);

    }

最佳答案

这是聚合多列的示例...

// group data
var group = google.visualization.data.group(
  data,  // data table
  [1],   // group data by ManagerName
  [
    // agg columns
    {'column': 6, 'aggregation': google.visualization.data.sum, 'type': 'number'},
    {'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'}
  ]
);

然后您可以创建一个 View 以在计算中使用聚合列

// create view over group
var view = new google.visualization.DataView(group);
view.setColumns([0, {
  calc: function (groupData, row) {
    return {
      v: (groupData.getValue(row, 1) / (groupData.getValue(row, 1) + groupData.getValue(row, 2))),
      f: (groupData.getValue(row, 1) / (groupData.getValue(row, 1) + groupData.getValue(row, 2))).toFixed(2) + '%'
    };
  },
  type: 'number'
}]);

一旦表格上触发'ready'事件，您就可以将总行添加到表格图表

请参阅以下示例，取自 fiddle ...

google.charts.load('current', { packages: ['table','corechart'] });
google.charts.setOnLoadCallback(GetChartData);

function GetChartData() {
  var jsonData = {
    "cols": [
      {
        "type": "string",
        "id": "Division",
        "label": "Division"
      },
      {
        "type": "string",
        "id": "ManagerName",
        "label": "ManagerName"
      },
      {
        "type": "string",
        "id": "TechName",
        "label": "TechName"
      },
      {
        "type": "string",
        "id": "TechID",
        "label": "TechID"
      },
      {
        "type": "string",
        "id": "CableMonth",
        "label": "CableMonth"
      },
      {
        "type": "string",
        "id": "CableYear",
        "label": "CableYear"
      },
      {
        "type": "number",
        "id": "SavedTest",
        "label": "SavedTest"
      },
      {
        "type": "number",
        "id": "MissedTest",
        "label": "MissedTest"
      },
      {
        "type": "number",
        "id": "Perc",
        "label": "Perc"
      },
      {
        "type": "string",
        "id": "ManagerUserName",
        "label": "ManagerUserName"
      }
    ],
    "rows": [
      {
        "c": [
          {
            "v": "TPA"
          },
          {
            "v": "Bob Dobalina"
          },
          {
            "v": "Mike Hunt"
          },
          {
            "v": "74339"
          },
          {
            "v": "April"
          },
          {
            "v": "2016"
          },
          {
            "v": 35
          },
          {
            "v": 2
          },
          {
            "v": 0.95
          },
          {
            "v": "BDobalina"
          }
        ]
      },
      {
        "c": [
          {
            "v": "TPA"
          },
          {
            "v": "Bob Dobalina"
          },
          {
            "v": "Mike Hunt"
          },
          {
            "v": "74339"
          },
          {
            "v": "February"
          },
          {
            "v": "2016"
          },
          {
            "v": 28
          },
          {
            "v": 6
          },
          {
            "v": 0.82
          },
          {
            "v": "BDobalina"
          }
        ]
      },
      {
        "c": [
          {
            "v": "TPA"
          },
          {
            "v": "Bob Dobalina"
          },
          {
            "v": "Mike Hunt"
          },
          {
            "v": "74339"
          },
          {
            "v": "January"
          },
          {
            "v": "2016"
          },
          {
            "v": 43
          },
          {
            "v": 4
          },
          {
            "v": 0.91
          },
          {
            "v": "BDobalina"
          }
        ]
      },
      {
        "c": [
          {
            "v": "TPA"
          },
          {
            "v": "Bob Dobalina"
          },
          {
            "v": "Mike Hunt"
          },
          {
            "v": "74339"
          },
          {
            "v": "March"
          },
          {
            "v": "2016"
          },
          {
            "v": 45
          },
          {
            "v": 6
          },
          {
            "v": 0.88
          },
          {
            "v": "BDobalina"
          }
        ]
      },
      {
        "c": [
          {
            "v": "TPA"
          },
          {
            "v": "Bob Dobalina"
          },
          {
            "v": "Chris Christianson"
          },
          {
            "v": "72019"
          },
          {
            "v": "April"
          },
          {
            "v": "2016"
          },
          {
            "v": 41
          },
          {
            "v": 2
          },
          {
            "v": 0.95
          },
          {
            "v": "BDobalina"
          }
        ]
      },
      {
        "c": [
          {
            "v": "TPA"
          },
          {
            "v": "Bob Dobalina"
          },
          {
            "v": "Chris Christianson"
          },
          {
            "v": "72019"
          },
          {
            "v": "March"
          },
          {
            "v": "2016"
          },
          {
            "v": 34
          },
          {
            "v": 5
          },
          {
            "v": 0.87
          },
          {
            "v": "BDobalina"
          }
        ]
      },
      {
        "c": [
          {
            "v": "TPA"
          },
          {
            "v": "Bob Dobalina"
          },
          {
            "v": "Robert Bank"
          },
          {
            "v": "80862"
          },
          {
            "v": "May"
          },
          {
            "v": "2016"
          },
          {
            "v": 11
          },
          {
            "v": 5
          },
          {
            "v": 0.69
          },
          {
            "v": "BDobalina"
          }
        ]
      },
      {
        "c": [
          {
            "v": "TPA"
          },
          {
            "v": "Bob Dobalina"
          },
          {
            "v": "Tina Turner"
          },
          {
            "v": "82371"
          },
          {
            "v": "March"
          },
          {
            "v": "2016"
          },
          {
            "v": 42
          },
          {
            "v": 4
          },
          {
            "v": 0.91
          },
          {
            "v": "BDobalina"
          }
        ]
      }
    ]
  };

  var data = new google.visualization.DataTable(jsonData);

  // group data
  var group = google.visualization.data.group(
    data,  // data table
    [1],   // group data by ManagerName
    [
      // agg columns
      {'column': 6, 'aggregation': google.visualization.data.sum, 'type': 'number'},
      {'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'}
    ]
  );

  // create view over group
  var view = new google.visualization.DataView(group);
  view.setColumns([0, {
    calc: function (groupData, row) {
      return {
        v: (groupData.getValue(row, 1) / (groupData.getValue(row, 1) + groupData.getValue(row, 2))),
        f: (groupData.getValue(row, 1) / (groupData.getValue(row, 1) + groupData.getValue(row, 2))).toFixed(2) + '%'
      };
    },
    type: 'number'
  }]);


  var formatter = new google.visualization.NumberFormat({
      fractionDigits: 2,
      suffix: '%'
  });

  formatter.format(data, 8);
  var container = document.getElementById('table_div');
  var table = new google.visualization.Table(container);

  // table 'ready' event
  google.visualization.events.addListener(table, 'ready', function () {
    // add total row for each group row
    for (var i = 0; i < group.getNumberOfRows(); i++) {
      var totalRow = container.getElementsByTagName('TBODY')[0].insertRow(-1);

      // add total row cell for each header cell
      Array.prototype.forEach.call(container.getElementsByTagName('TR')[0].cells, function(cell) {
        var totalCell = totalRow.insertCell();
        switch (totalCell.cellIndex) {
          case 1:
            totalCell.innerHTML = 'Total';
            break;

          case 2:
            totalCell.innerHTML = group.getValue(i, 0);
            break;

          case 7:
            totalCell.innerHTML = group.getValue(i, 1);
            totalCell.style.textAlign = 'right';
            break;

          case 8:
            totalCell.innerHTML = group.getValue(i, 2);
            totalCell.style.textAlign = 'right';
            break;

          case 9:
            totalCell.innerHTML = (group.getValue(i, 1) / (group.getValue(i, 1) + group.getValue(i, 2))).toFixed(2) + '%';
            totalCell.style.textAlign = 'right';
            break;
        }
      });
    }
  });

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  table.draw(data, { showRowNumber: true, width: '100%', height: '100%' });


  // Create a view that shows everyone hired since 2007.
  chart.draw(view, { width: 900, height: 900, is3D: true, title: 'Test Bar Chart' });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="table_div"></div>

关于javascript - Google 可视化分组计算，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37075989/

文章推荐： javascript - new Datamap() 在调用之间保持共享的内存状态

文章推荐： javascript - 取消选择所有选项卡 jquery tabselect

服务器端的 Firebird 计算(计算)字段
SQL 和一般开发的新手，我有一个表(COUNTRIES)，其中包含字段(INDEX、NAME、POPULATION、AREA) 通常我添加一个客户端(Delphi)计算字段(DENSITY)和 On
jquery - 计算(百分比)计算(像素)
我想使用 calc(100%-100px)，但在我的 demo 中不起作用由于高度只接受像素，因此如何将此百分比值转换为像素。最佳答案以下将为您提供高度: $(window).height();
MySql 计算
我正在尝试在 MySQL 中添加列并动态填充其他列。例如我有一张表“数字”并具有第 1 列、第 2 列、第 3 列，这些总数应填充在第 4 列中最佳答案除非我误解了你的问题，否则你不只是在寻找:
mysql - 计算
我想返回简单计算的结果，但我不确定如何执行此操作。我的表格如下: SELECT COUNT(fb.engineer_id) AS `total_feedback`, SUM(fb.ra
嵌套for循环中的c++计算
我一直在尝试做这个程序，但我被卡住了，我仍然是一个初学者，任何帮助将不胜感激。我需要程序来做打印一个 10 X 10 的表格，其中表格中的每个条目都是行号和列号的总和包含一个累加器，用于计算所有表
c - 计算
这个计算背后一定有一些逻辑。但我无法得到它。普通数学不会导致这种行为。谁能帮我解释一下原因 printf ("float %f\n", 2/7 * 100.0); 结果打印 1.000000 为什么会
计算 AND 的算法
我想计算从 0 到 (n)^{1/2} - 1 的数字的 AND每个数字从 0 到 (n)^{1/2} - 1 .我想在 O(n) 中执行此操作时间，不能使用 XOR、OR、AND 运算。具体来说，
Excel - 在数字格式中使用公式/计算
如何在 Excel 中将公式放入自定义数字格式？例如(出于说明目的随机示例)，假设我有以下数据: 输入输出在不编辑单元格中的实际数据的情况下，我想显示单元格中的值除以 2，并保留两位小数: 有没
Flutter:隔离内存泄漏(计算)
每次我在 Flutter 应用程序中调用计算()时，我都会看到内存泄漏，据我所知，这基本上只是一种生成隔离的便捷方法。我的应用程序内存占用增加并且在 GC 之后永远不会减少。我已将我的代码简化为仅调
R中的RMSE(均方根偏差)计算
我有数字特征观察 V1通过 V12用于目标变量 Wavelength .我想计算 Vx 之间的 RMSE列。数据格式如下。每个变量“Vx”以 5 分钟的间隔进行测量。我想计算所有 Vx 变量的观测值
计算 C 文件中未知数量的字符
我正在寻找一种使用 C 语言计算文件中未知字符数的简单方法。谢谢你的帮助最佳答案 POSIX 方式(可能是您想要的方式): off_t get_file_length( FILE *file ) {
sql - 计算/派生连续日期跨度中的第一个开始日期
我正在使用 Postgres，并且我正试图围绕如何在连续日期跨度中得出第一个开始日期的问题进行思考。例如 :- ID | Start Date | End Date =================
jquery - 计算，用逗号替换点
我有一个订单表格，我在其中使用 jQuery 计算插件来汇总总数。此求和工作正常，但生成的“总和”存在问题。总之，我希望用逗号替换任何点。代码的基础是； function ($this) {
Delphi错误的 double 计算
我在使用 double 变量计算简单算术方程时遇到问题。我有一个具有 double 属性 Value 的组件，我将此属性设置为 100。然后我做一个简单的减法来检查这个值是否真的是 100: va
openssl CRC32 计算
我在这里看到了一些关于 CRC 32 计算的其他问题。但没有一个让我满意，因此是这样。 openssl 库是否有任何用于计算 CRC32 的 api 支持？我已经在为 SHA1 使用 openssl，
php - 计算-1个月时的PHP天错误
当我在PHP日期计算中遇到问题时，我感到惊讶。 $add = '- 30 days'; echo date('Y-m-01', strtotime($add)); // result is 2017-
持有变量的 JavaScript 计算
我正在使用 javascript 进行练习，我编写了这个脚本来计算 2 个变量的总和，然后在第三个方程中使用这个总和!关于如何完成这项工作的任何想法都将非常有用! First Number:
audio - sample 计算
我有一个来自EAC的提示单和一个包含完整专辑的FLAC文件。我正在尝试制作一些python脚本来播放文件，因为我需要能够设置在flac文件中开始的位置。如何从CueSheet格式MM:SS:FF转
javascript - 计算 for 循环中输入值的总和
这个问题已经有答案了: Adding two numbers concatenates them instead of calculating the sum (24 个回答) 已关闭去年。我有一个
使用输入和跨度字段的 Javascript 计算
4000 我需要上面字段 name="quantity" 和 id="price" 中的值，并使用 javascript 函数进行计算，并将其显示在字段 id= 中仅当我单击计算按钮时才显示“总

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Google 可视化分组计算