2017-08-04 11 views
1

以下はgoogle.visualization.data.group()google.visualization.data.sumを使用してゲージチャートを描画する私の関数です。私は3回集計の計算値MAXを設定するハード150Google Visualizationデータ集計の結果変数を設定する

var options = { 
    max: '150' 
}; 

をコード化された最大値を設定している 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() 

は、実施例のためのフィドルを参照してください。和。

例:50 * 3 = 150、最大値

私はこれを行うための最善の方法を知らないと凝集が計算google.visualization.data.sum値に設定された変数を取得することはできませんが返されますgoogle.visualization.data.sum

指導者からの助けに感謝します!ありがとう!

答えて

1

google.visualization.data.groupポストのグループテーブル1行、
そうに以下を使用返す

getValue(rowIndex, colIndex)

グループテーブル内の値を取得する正規DataTable class

使用chart methodgetValueを返します値を知っている...

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>

+0

を参照してください...私はあなたに感謝...完全に働きました! – cmill