javascript - 将变量设置为 Google 可视化数据聚合的结果

Question

下面是我的函数，它使用 google.visualization.data.group() 和 google.visualization.data.sum 绘制仪表图。

有关工作示例，请参见 fiddle : https://jsfiddle.net/xmcqyuqc/7/

    function drawChart() {

    var urlString = '../Logs/clnLogsSelectingEvents?grade=All&SC=1&CauseSC=3&CutOffDate=01/01/2017';

    $.ajax({
        type: 'GET',
        dataType: 'json',
        contentType: "application/json",
        //url: urlString,       //I have commented out but this is my original source.
        success: function (result) {

            //Create DataTable
            var data = new google.visualization.DataTable();

            //Add Columns
            data.addColumn('string', 'CW');
            data.addColumn('string', 'Business Division');
            data.addColumn('string', 'Product');
            data.addColumn('number', 'Cost');
            data.addColumn('number', 'Quantity');
            data.addColumn('number', 'Age (d)');
            data.addColumn('string', 'Actual State');

            //Add Rows
            var dataArray = [];
            //replaced with manual sample data     
            for (i = 0; i < 5; i++) { 
              dataArray.push([      
                'CW' + i,
                'GS',
                'line' + i,
                10,
                99,
                99,
                'state' + i
              ]);        
            }
            data.addRows(dataArray);

            //Create Data View
            var view = new google.visualization.DataView(data);
            view.setColumns([1, 3]);

            //Create Data Aggregation
            var groupView = google.visualization.data.group(view, [{
                column: 0,
                type: 'string'
            }], [{
                column: 1,
                aggregation: google.visualization.data.sum,
                type: 'number'
            }]);

            //Options
            var options = {   
                max: '150'      ///I want to set this based on the result of the aggregation
            };

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

    }   //END  success: function (result) {
  });     //END  $.ajax({
}           //END  function drawChart()

我已将最大硬编码设置为 150。

var options = {   
   max: '150' 
};

我想将最大值设置为总和的 3 倍的计算值。

示例:google.visualization.data.sum 返回 50 * 3 = 150 最大值

我不知道执行此操作的最佳方法，也无法将变量设置为聚合计算的 google.visualization.data.sum 值。

非常感谢大师们的帮助!谢谢!

Answer 1

google.visualization.data.group 返回常规 DataTable class

使用chart method getValue获取组表中的值

getValue(rowIndex, colIndex)

帖子中的组表返回一行，
所以使用以下内容来了解​​值(value)......

groupView.getValue(0, 1)

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

google.charts.load('current', {
  callback: drawChart,
  packages: ['gauge']
});

function drawChart() {
  //Create DataTable
  var data = new google.visualization.DataTable();

  //Add Columns
  data.addColumn('string', 'CW');
  data.addColumn('string', 'Business Division');
  data.addColumn('string', 'Product');
  data.addColumn('number', 'Cost');
  data.addColumn('number', 'Quantity');
  data.addColumn('number', 'Age (d)');
  data.addColumn('string', 'Actual State');

  //Add Rows
  var dataArray = [];
  //replaced with manual sample data
  for (i = 0; i < 5; i++) {
    dataArray.push([
      'CW' + i,
      'GS',
      'line' + i,
      10,
      99,
      99,
      'state' + i
    ]);
  }
  data.addRows(dataArray);

  //Create Data View
  var view = new google.visualization.DataView(data);
  view.setColumns([1, 3]);

  //Create Data Aggregation
  var groupView = google.visualization.data.group(view, [{
      column: 0,
      type: 'string'
  }], [{
      column: 1,
      aggregation: google.visualization.data.sum,
      type: 'number'
  }]);

  //Options
  var options = {
      max: groupView.getValue(0, 1)
  };

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

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