Question

因此，我有一个根据字符串过滤器而变化的表。该表的一列以行显示一些信用值。如何根据表格中显示的值求和并将其显示在标签中？

实际上，我只得到专栏的总和，但是总数没有根据专栏的展览而变化。

这是我的代码段：

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'ID');
  data.addColumn('string', 'Customer_Name');
  data.addColumn('number', 'Credits');
  data.addColumn('string', 'Date');
  data.addColumn('string', 'Seller');
  data.addColumn('string', 'Branch');

  data.addRows([
    [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
    [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch2'],
    [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
    [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch4'],
    [213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
  ]);

  var groupedBranch = google.visualization.data.group(data, [5], [{
    column: 0,
    type: 'number',
    label: data.getColumnLabel(0),
    aggregation: google.visualization.data.count
  }]);

  var branchFilter = new google.visualization.ControlWrapper({
    controlType: 'StringFilter',
    containerId: 'div_filter1',
    dataTable: groupedBranch,
    options: {
      filterColumnLabel: 'Branch',
      matchType: 'any',
      ui: {
        label: 'Branch filter',
        labelSeparator: ':',
        labelStacking: 'vertical'
      }
    }
  });

  google.visualization.events.addListener(branchFilter, 'ready', function() {
    drawCharts();
    getCreditSum();
  });
  google.visualization.events.addListener(branchFilter, 'statechange', function() {
    drawCharts();
    getCreditSum();
  });

  var branchChart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'div_chart1',
    dataTable: groupedBranch,
    options: {
      animation: {
        duration: 666,
        easing: 'inAndOut',
        startup: true
      },
      backgroundColor: {
        fill: 'transparent'
      },
      title: 'Branches',
      hAxis: {
        title: 'Branch',
        titleTextStyle: {
          color: '#999'
        },
        textStyle: {
          fontSize: 12
        }
      },
      vAxis: {
        minValue: 0
      },
      colors: ['#f39c12'],
      legend: 'none'
    }
  });

  var tableChart = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_chart3',
    dataTable: data
  });

  branchFilter.draw();

  //I think I'm missing something here
  function getCreditSum() {
    var CurrentCreditSum = google.visualization.data.group(
      tableChart.getDataTable(), [{
        column: 5,
        type: 'string',
        modifier: function() {
          return 'Credit Sum'
        }
      }], [{
        aggregation: google.visualization.data.sum,
        column: 2,
        type: 'number'
      }]
    );
    document.getElementById('TotalSum').innerHTML = CurrentCreditSum.getValue(0, 1);
  }
  //
  
  function drawCharts() {
    var filterValue = branchFilter.getState().value;
    var viewBranch = {};
    var viewTable = {};

    if (filterValue !== '') {
      viewBranch.rows = groupedBranch.getFilteredRows([{
        column: 0,
        test: function(value) {
          return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
        }
      }]);
      viewTable.rows = data.getFilteredRows([{
        column: 5,
        test: function(value) {
          return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
        }
      }]);
    }
    branchChart.setView(viewBranch);
    branchChart.draw();
    tableChart.setView(viewTable);
    tableChart.draw();
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_filter1"></div>
<div id="div_chart1"></div>
<div id="div_chart3"></div>
<br> current credit column sum
<div id="TotalSum"></div>

这里是一个例子：

Answer 1

让我们将功劳计算降低到drawCharts，
那么我们可以使用与表格图表相同的过滤器行来创建数据视图

var CurrentCreditView = new google.visualization.DataView(tableChart.getDataTable());
if (viewTable.hasOwnProperty('rows')) {
  CurrentCreditView.setRows(viewTable.rows);
}

然后使用分组方法使用数据视图

var CurrentCreditSum = google.visualization.data.group(
  CurrentCreditView,
  [{column: 5, type: 'string', modifier: function () {return 'Credit Sum'}}],
  [{aggregation: google.visualization.data.sum, column: 2, type: 'number'}]
);
document.getElementById('TotalSum').innerHTML = CurrentCreditSum.getValue(0, 1);

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'ID');
  data.addColumn('string', 'Customer_Name');
  data.addColumn('number', 'Credits');
  data.addColumn('string', 'Date');
  data.addColumn('string', 'Seller');
  data.addColumn('string', 'Branch');

  data.addRows([
    [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
    [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch2'],
    [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
    [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch4'],
    [213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
  ]);

  var groupedBranch = google.visualization.data.group(data, [5], [{
    column: 0,
    type: 'number',
    label: data.getColumnLabel(0),
    aggregation: google.visualization.data.count
  }]);

  var branchFilter = new google.visualization.ControlWrapper({
    controlType: 'StringFilter',
    containerId: 'div_filter1',
    dataTable: groupedBranch,
    options: {
      filterColumnLabel: 'Branch',
      matchType: 'any',
      ui: {label: 'Branch filter', labelSeparator:':', labelStacking:'vertical'}
    }
  });

  google.visualization.events.addListener(branchFilter, 'ready', drawCharts);
  google.visualization.events.addListener(branchFilter, 'statechange', drawCharts);

  var branchChart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'div_chart1',
    dataTable: groupedBranch,
    options: {
      animation: {duration: 666, easing: 'inAndOut', startup: true},
      backgroundColor: {fill:'transparent' },
      title: 'Branches',
      hAxis: {title: 'Branch', titleTextStyle: {color: '#999'}, textStyle: {fontSize: 12}},
      vAxis: {minValue: 0},
      colors: ['#f39c12'],
      legend: 'none'
    }
  });

  var tableChart = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_chart3',
    dataTable: data
  });

  branchFilter.draw();

  function drawCharts() {
    var filterValue = branchFilter.getState().value;
    var viewBranch = {};
    var viewTable = {};

    if (filterValue !== '') {
      viewBranch.rows = groupedBranch.getFilteredRows([{
        column: 0,
        test: function (value) {
          return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
        }
      }]);
      viewTable.rows = data.getFilteredRows([{
        column: 5,
        test: function (value) {
          return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
        }
      }]);
    }
    branchChart.setView(viewBranch);
    branchChart.draw();
    tableChart.setView(viewTable);
    tableChart.draw();

    var CurrentCreditView = new google.visualization.DataView(tableChart.getDataTable());
    if (viewTable.hasOwnProperty('rows')) {
      CurrentCreditView.setRows(viewTable.rows);
    }

    var CurrentCreditSum = google.visualization.data.group(
      CurrentCreditView,
      [{column: 5, type: 'string', modifier: function () {return 'Credit Sum'}}],
      [{aggregation: google.visualization.data.sum, column: 2, type: 'number'}]
    );
    document.getElementById('TotalSum').innerHTML = CurrentCreditSum.getValue(0, 1);
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_filter1"></div>
<div id="div_chart1"></div>
<div id="div_chart3"></div>
<br>
current credit column sum <div id="TotalSum"></div>

如何汇总表格视图中的列值并将其显示在Google图表中的标签中？

1 个答案: