Google 可视化仪表板表中的总计

2023-12-30

我有一个简单的 Google 可视化仪表板示例,其中包含一个类别选择器控件和一张表格。我的代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://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([
          ['Metric', 'Value'],
          ['CPU' , 12],
          ['Memory', 20],
          ['Disk', 7],
          ['Network', 54]
        ]);

        // Define a category picker for the 'Metric' column.
        var categoryPicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control',
          'options': {
            'filterColumnLabel': 'Metric',
            'ui': {
              'allowTyping': false,
              'allowMultiple': true,
              'selectedValuesLayout': 'belowStacked'
            }
          },

        });

        // Define a table.
        var table = new google.visualization.ChartWrapper({
          'chartType': 'Table',
          'containerId': 'chart',
          'options': {
            'width': 400,
            'height': 180
          }
        });

        // Create the dashboard.
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
          // Configure the category picker to affect the table
          bind(categoryPicker, table).
          // 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="control"></div>
          </td>
          <td style='width: 600px'>
            <div style="float: left;" id="chart"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

我遇到了一个问题,我想要最后的值的总计。如何在表末尾添加一行,以便它显示第二列中所有值的总计。即,最初它应该显示所有四行的总和,当应用过滤器时,它应该显示过滤后的行值的总和。


您可以在“绘制”显示总计的图表之前添加一行:

例如:

  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
    ['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
    ['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
    ['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
    ['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
    ['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
    ['2008',  1901067,   6792087,       1037327,      1284795,   6240921,  19830493]
  ]);

  function getSum(data, column) {
    var total = 0;
    for (i = 0; i < data.getNumberOfRows(); i++)
      total = total + data.getValue(i, column);
    return total;
  }

  alert(getSum(data, 1));

这会给你一个很好的警告框,上面写着9920627

1336060+1538156+1576579+1600652+1968113+1901067=9920627

您可以在末尾添加一行,如下所示:

addRow('Total', getSum(data, 1));

如果问题是如何获得由滑块等过滤的列的总和,那么这是一个不同的野兽,并且是asgallant 的这个 jsfiddle http://jsfiddle.net/asgallant/rEhUp/可能更适合:

google.load('visualization', '1.1', {packages: ['controls']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
        ['Name', 'RoolNumber', 'Gender', 'Age', 'Donuts eaten'],
        ['Michael', 1, 'Male', 12, 5],
        ['Elisa', 2, 'Female', 20, 7],
        ['Robert', 3, 'Male', 7, 3],
        ['John', 4, 'Male', 54, 2],
        ['Jessica', 5, 'Female', 22, 6],
        ['Aaron', 6, 'Male', 3, 1],
        ['Margareth', 7, 'Female', 42, 8],
        ['Miranda', 8, 'Female', 33, 6]
    ]);

    // Define a slider control for the Age column.
    var slider_rn = new google.visualization.ControlWrapper({
        controlType: 'NumberRangeFilter',
        containerId: 'control2',
        options: {
            filterColumnLabel: 'RoolNumber',
            ui: {
                labelStacking: 'vertical'
            }
        }
    });

    var slider = new google.visualization.ControlWrapper({
        controlType: 'NumberRangeFilter',
        containerId: 'control1',
        state: {
            lowValue: 10,
            highValue: 40,
            highThumbAtMax: true
        },
        options: {
            filterColumnLabel: 'Age',
            ui: {
                labelStacking: 'vertical'
            }
        }
    });

    // Define a category picker control for the Gender column
    var categoryPicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'control3',
        options: {
            filterColumnLabel: 'Gender',
            ui: {
                labelStacking: 'vertical',
                allowTyping: false,
                allowMultiple: false
            }
        }
    });

    // Define a Pie chart
    var pie = new google.visualization.ChartWrapper({
        chartType: 'PieChart',
        containerId: 'chart1',
        options: {
            width: 300,
            height: 300,
            legend: 'none',
            title: 'Donuts eaten per person',
            chartArea: {
                left: 15,
                top: 15,
                right: 0,
                bottom: 0
            },
            pieSliceText: 'label'
        },
        // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
        // from the 'data' DataTable.
        view: {
            columns: [0, 4]
        }
    });

    // Define a table
    var table = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'chart2',
        options: {
            width: '500px'
        }
    });

    // get average and geometric mean values
    google.visualization.events.addListener(table, 'ready', function () {
        var group = google.visualization.data.group(table.getDataTable(), [{
            // we need a key column to group on, but since we want all rows grouped into 1, 
            // then it needs a constant value
            column: 0,
            type: 'number',
            modifier: function () {
                return 1;
            }
        }], [{
            // get the average age
            column: 3,
            label: 'Average Age',
            type: 'number',
            aggregation: google.visualization.data.avg
        }, {
            // get the geometric mean of age
            column: 3,
            label: 'Geometric Mean of Age',
            type: 'number',
            aggregation: function (values) {
                var product = 1;
                var n = values.length;
                for (i = 0; i < n; i++) {
                    product = product * values[i];
                }
                return nthroot(product, n);
            }
        }]);
        document.getElementById('avg').innerHTML = group.getValue(0, 1);
        document.getElementById('geomean').innerHTML = group.getValue(0, 2);
    });

    // Create a dashboard
    new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Establish bindings, declaring the both the slider and the category
    // picker will drive both charts.
    bind([slider, slider_rn, categoryPicker], [table, pie]).
    // Draw the entire dashboard.
    draw(data);
}

// nthroot function courtesy of http://gotochriswest.com
// see http://gotochriswest.com/blog/2011/05/06/cube-root-an-beyond/
// special function necessary because Math.pow(-8, 1/3) returns NaN instead of -2
function nthroot(x, n) {
    try {
        var negate = n % 2 == 1 && x < 0;
        if (negate) {
            x = -x;
        }
        var possible = Math.pow(x, 1 / n);
        n = Math.pow(possible, n);
        if (Math.abs(x - n) < 1 && (x > 0 == n > 0)) {
            return negate ? -possible : possible;
        }
    } catch(e){}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Google 可视化仪表板表中的总计 的相关文章

  • 如何从 Google 地理图表的工具提示中删除坐标

    我在地图上添加了一些标记 使用 Google Chart API data addColumn number Lat data addColumn number Long data addColumn number Value data a
  • Shiny - googlevis:gvisPieChart 的工具提示

    我正在尝试为 googlevis 饼图创建自定义工具提示 我已经发现通过 googleVis 使用角色 http cran r project org web packages googleVis vignettes Using Roles
  • 使用 PHP/MySQL 日期查询向 Google 可视化页面提交表单

    我使用从 PHP MySQL 提取的数据在谷歌可视化上创建饼图 该图表看起来不错 但我想添加一个日历 日期选择器 以使饼图动态化 我的日期范围选择器似乎正在工作 它从我的数据库中提取正确的数据 选择日期 提交查询后 它返回此字符串 over
  • 将 Google 图表导出到 Excel

    需要将 Google 图表导出到 Excel 中 有没有办法通过jquery达到同样的效果 从 Google Chart 文档中 我了解到可以通过获取 ImageURI 将图表转换为图像 但是 当尝试使用 ImageURI 导出图像时 请参
  • 来自 Google 的带有 Charts API 示例的 GWT 无法正常工作

    我已经下载了在 GWT 中使用图表所需的 jar 附带的存档 存档中还有示例应用程序 http gwt google com samples hellovisualization 1 1 0 HelloVisualization html
  • 在谷歌折线图中的同一行上组合实线和虚线格式

    我在我的应用程序中使用谷歌折线图来显示当前值和预测值 我收到的数据来自数据库 当前值和预计值 我希望看到直到当前分数的实线和未来预计分数的虚线 请让我知道如何实现这一目标 Example 匹配 我5月10日的当前费用是5000美元 到10月
  • Google Charts:如何更改百分比标签颜色?

    我正在使用 Google Charts 来显示饼图 在我的选项变量中 我将图例设置为 legend position labeled textStyle color white fontSize 24 现在 如果您查看下图 字体颜色仅适用于
  • Google Chart:如何绘制条形图的垂直线

    我正在尝试添加一条垂直线 以便当元素超过该值时可以在视觉上有所区别 Thanks
  • Google饼图:删除饼图切片之间的白色间隙

    如同这个问题 https stackoverflow com questions 18784246 removing the white line between slices in flot pie chart 22227464 但对于
  • PHP 数组转换为 google 图表

    我需要一些帮助将 PHP 数据放入谷歌图表中 我创建了一个简单的数组 chart arr array year new balance json encode chart arr If I run 我看到以下内容 2015 1150 201
  • 创建 Google 图表并转换为图像服务器端

    我目前在我的网站上的几个地方实现了谷歌图表 我可以将它们转换为图像并下载它们 那很简单 现在我希望创建这些图表并将它们转换为服务器上的图像 我做了很多搜索 但没有找到任何例子 也没有提出任何问题 这开始让我认为这是不可能的 我知道这些图表通
  • jQuery 美元符号未定义

    在我寻求获取历史信息的过程中 我尝试使用下面的代码 Chrome 调试器说Uncaught ReferenceError is not defined 你能建议一个解决办法吗 我真的被困住了 我只需要它在 Chrome 上工作 并且我正在利
  • 导出谷歌图表?

    我编写此代码是为了创建图表 表格和工具栏 google load visualization 1 packages corechart google load visualization 1 packages table google se
  • 如何在另一个div中克隆和重新绘制谷歌图表?

    我很难弄清楚如何做到这一点 因为我对谷歌图表不太熟悉 我正在使用pivotTable js 一切正常 但我想 保存 或有一个按钮 将当前创建的图表克隆到另一个div 我做了一个全局变量 var wrapper 这是为了保存图表 wrappe
  • 即时刷新 Google 可视化

    我目前正在通过谷歌可视化创建谷歌图表 我希望能够通过单击按钮刷新 更新此图表 我尝试了很多不同的方法来做到这一点 但没有一个有效 所以我正在寻找任何人都可以提出的建议 我当前的平台是 ASP net 使用 C 而 google 的东西是用
  • Google 可视化 - 第 0 行的行类型无效

    我必须使用谷歌可视化在饼图上可视化 url json 数据 我的代码似乎是为了达到目的而必须的 但我在控制台中收到 第 0 行无效的行类型 错误 数据格式有问题吗 如果有人可以提供帮助 我们将不胜感激 这是我的代码 PHP
  • 向 Google 仪表添加 % 符号

    我正在使用 Google 仪表 并且想在仪表中的值后面添加一个 符号 我的值显示良好 没有百分比符号 整数 0 100 但是当我开始尝试添加百分比符号时 事情变得不稳定 这是我尝试过的 Format the data to include
  • 视频馈送至 ThingsBoard 仪表板

    我目前使用 ThingsBoard 作为 IoT 代理来捕获来自多个传感器的遥测数据并将其显示到仪表板 我想添加显示来自 iPhone 相机或网络摄像头的实时视频源的功能 我想知道这里是否有人知道 ThingsBoard 是否支持任何类型的
  • Kubernetes 仪表板 - ServiceUnavailable(503 错误)

    我是 Kubernetes 新手 我正在尝试使用 kops 在 AWS 上设置 Kubernetes 集群 我成功地设置了集群 但是 我无法访问仪表板 UI https kubernetes io docs tasks access app
  • 如何更改 Google 表格中图表的背景不透明度?

    我想在 Google 表格中设置 Google 图表的透明度或不透明度 就像在 Microsoft Excel 中一样 将图像设置在文本后面 以便文本仍然可读 不过好像该功能不起作用 功能预览 http drive google com f

随机推荐