javascript - Google Visualization group() 聚合函数返回空值

Question

我有一个名为的列someNumber，其中包含空值和零。应用于google.visualization.data.group此列时，我无法将零输入到表中，只有空值。

两者的文档都表示空值被忽略.min，.max但我似乎无法返回除空值之外的任何内容。

我怎样才能让零进入我的桌子？

谢谢各位专家！

工作示例：

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);

function gChart0() {
  drawChart();
};

function drawChart() {

  var result = [{
    "calendarWeek": "2017-W30",
    "clnCount": 1,
    "someNumber": null //NOTE THIS IS SET TO NULL
  }, {
    "calendarWeek": "2017-W30",
    "clnCount": 3,
    "someNumber": 0 //NOTE THIS IS SET TO ZERO
  }];

  //Create DataTable
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Calendar Week');
  data.addColumn('number', 'Count');
  data.addColumn('number', 'Some Number');
  
  var dataArray = [];
  $.each(result, function(i, obj) {
    dataArray.push([
      obj.calendarWeek,
      obj.clnCount,
      obj.someNumber
    ]);
  });
  data.addRows(dataArray);

  //grouping 
  var groupView = google.visualization.data.group(data,
    [{
      column: 0,
      type: 'string'
    }],
    [{
        column: 1,
        aggregation: google.visualization.data.sum,
        type: 'number'
      },
      {
        column: 2,
        aggregation: google.visualization.data.min,
        type: 'number'
      }
    ]);

  //Options
  var options = {};

  // Instantiate and draw chart, passing in options.
  var chart = new google.visualization.Table(document.getElementById('chart_div'));
  chart.draw(groupView, options);

} //END  function drawChart()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div"></div>

标签： javascriptchartsgoogle-visualization

Answer 1

您可以提供自己的自定义聚合函数。
聚合函数应该接受一个值数组作为唯一的参数。

在自定义 sum 函数中，我们null用零替换

function customSum(values) {
  var sum = 0;
  values.forEach(function (value) {
    sum += value || 0;
  });
  return sum;
}

在自定义 min 函数中，Math.min当两个值都为null

function customMin(values) {
  var min = null;
  values.forEach(function (value) {
    min = Math.min(value, min);
  });
  return min;
}

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

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

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);

function gChart0() {
  drawChart();
};

function drawChart() {

  var result = [{
    "calendarWeek": "2017-W30",
    "clnCount": 1,
    "someNumber": null //NOTE THIS IS SET TO NULL
  }, {
    "calendarWeek": "2017-W30",
    "clnCount": 3,
    "someNumber": 0 //NOTE THIS IS SET TO ZERO
  }];

  //Create DataTable
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Calendar Week');
  data.addColumn('number', 'Count');
  data.addColumn('number', 'Some Number');

  var dataArray = [];
  $.each(result, function(i, obj) {
    dataArray.push([
      obj.calendarWeek,
      obj.clnCount,
      obj.someNumber
    ]);
  });
  data.addRows(dataArray);

  //grouping
  var groupView = google.visualization.data.group(data,
    [{
      column: 0,
      type: 'string'
    }],
    [{
        column: 1,
        aggregation: customSum,
        type: 'number'
      },
      {
        column: 2,
        aggregation: customMin,
        type: 'number'
      }
    ]);

  function customSum(values) {
    var sum = 0;
    values.forEach(function (value) {
      sum += value || 0;
    });
    return sum;
  }

  function customMin(values) {
    var min = null;
    values.forEach(function (value) {
      min = Math.min(value, min);
    });
    return min;
  }

  //Options
  var options = {};

  // Instantiate and draw chart, passing in options.
  var chart = new google.visualization.Table(document.getElementById('chart_div'));
  chart.draw(groupView, options);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>