javascript - 如何使用 Javascript 将多行数据放入图表中

Question

我无法弄清楚如何将多行 SQL 数据放入我的 Google Chart 中。

我已经将数据写入控制台(在下面注释掉)，但是如何编写谷歌图表代码，以便它为我的表中的每一行写入一个新数组？

例如，我希望对数据中的每一行重复以下代码:

[''+bridge_id_grab, +milemarker_grab, 0, '1', +bridge_health_grab]

完整代码:

var sql_statement3 = "SELECT bridge_id, bridge_health, milemarker FROM TABLE_NAME &api_key=MY_API_KEY&callback=?"
    $.getJSON('https://MY_USERNAME.cartodb.com/api/v2/sql/?q='+sql_statement3, function(data) {
      //console.log(data.rows);
      $.each(data.rows, function(key, val) {          
             for (i in data.rows) {             
                    var bridge_id_grab = [];                        
                    var bridge_health_grab = [];                        
                    var milemarker_grab = [];                       

                    bridge_id_grab.push(data.rows[i].bridge_id);                    
                    bridge_health_grab.push(data.rows[i].bridge_health);                    
                    milemarker_grab.push(data.rows[i].milemarker);  

                    //console.log(bridge_id_grab);
                    //console.log(bridge_health_grab);
                    //console.log(milemarker_grab);     

                     function corridor_chart() {

                            var data = google.visualization.arrayToDataTable([
                                    ['Bridge', 'MileMarker', '', '', 'Health'],
                                    [''+bridge_id_grab,    +milemarker_grab,     0,      '1',  +bridge_health_grab],
                                    [''+bridge_id_grab,    +milemarker_grab,     0,      '2',  +bridge_health_grab]
                            ]);

                              var options = {
                               "width": "100%",
                                            "legacyContinuousAxisRemoved": true,
                                            "chartArea": {
                                                "top": "0%",
                                                "left": "0%",
                                                "right": "0%",
                                                "width": "100%",
                                                "height": "80%"
                                            },
                                            "height": 180,
                                            "legend": "bottom",
                               title: '',
                               colors: ['#DB0000', '#FF0400', '#FF5500','#FF7C30', '#FFC431', '#FFF428', '#DCEA26', '#A7ED25', '#5DE207', '#00D300'],
                               "hAxis": {
                                 "useFormatFromData": true,
                                 "formatOptions": {},
                                 "textStyle": {
                                    "color": "none",
                                    "fontSize": 0
                                 },
                                 "viewWindow": {},
                                 "gridlines": {
                                    "color": "none",
                                    "count": "-1"
                                 },
                                 "titleTextStyle": {
                                    "color": "none",
                                    "fontSize": 0
                                 }
                              },
                                vAxis: {
                                title: "",
                                "gridlines": {
                                    "color": "none",
                                    "count": "0"
                                 },},
                                "bubble": {
                                 "textStyle": {
                                    "color": "blue",
                                    "fontSize": 11
                                 },
                                 "opacity": "1",
                                 "stroke": "#ffffff"
                              },
                              };

                              var chart = new google.visualization.BubbleChart(document.getElementById('corridor_chart'));
                              chart.draw(data, options);
                            }

                            google.setOnLoadCallback(corridor_chart);                       
                }
            });
        });

根据 darrylivan 的回答和评论编辑代码(它正在工作，尽管我仍然收到错误:“ Uncaught Error :不是数组”):

  var sql_statement3 = "SELECT bridge_id, bridge_health, milemarker FROM TABLE_NAME &api_key=MY_API_KEY&callback=?"
       $.getJSON('https://MY_USERNAME.cartodb.com/api/v2/sql/?q='+sql_statement3, function(data) {
                google.load('visualization', '1.0',  { 'packages': ['corechart', 'controls', 'bar'] });

                var chartData = [];
                chartData.push(  ['Bridge', 'MileMarker', '', '', 'Health'] )

                 for (var i = 0; i < data.rows.length; i++) 
                    {
                       var row = data.rows[i];
                       var dataRow = [ 
                          row.bridge_id.toString(), 
                          row.milemarker,
                          0, 
                          row.bridge_id.toString(),
                          row.bridge_health
                          ];

                        chartData.push( dataRow );
                        console.log(dataRow);
                    }

                    /* then call your charting func, but pass in the data
                      instead of computing it in that func.
                      */
                    corridor_chart( chartData );

                    function corridor_chart(chartData) {

                            var data = google.visualization.arrayToDataTable(chartData);

                              var options = {
                               "width": "100%",
                                            "legacyContinuousAxisRemoved": true,
                                            "chartArea": {
                                                "top": "0%",
                                                "left": "0%",
                                                "right": "0%",
                                                "width": "100%",
                                                "height": "80%"
                                            },
                                            "height": 180,
                               title: '',
                                            "legend": "bottom",
                               colors: ['#DB0000', '#FF0400', '#FF5500','#FF7C30', '#FFC431', '#FFF428', '#DCEA26', '#A7ED25', '#5DE207', '#00D300'],
                               "hAxis": {
                                 "useFormatFromData": true,
                                 "formatOptions": {},
                                 "textStyle": {
                                    "color": "none",
                                    "fontSize": 0
                                 },
                                 "viewWindow": {},
                                 "gridlines": {
                                    "color": "none",
                                    "count": "-1"
                                 },
                                 "titleTextStyle": {
                                    "color": "none",
                                    "fontSize": 0
                                 }
                              },
                                vAxis: {
                                title: "",
                                "gridlines": {
                                    "color": "none",
                                    "count": "0"
                                 },},
                                "bubble": {
                                 "textStyle": {
                                    "color": "blue",
                                    "fontSize": 11
                                 },
                                 "opacity": "1",
                                 "stroke": "#ffffff"
                              },
                              };

                              var chart = new google.visualization.BubbleChart(document.getElementById('corridor_chart'));
                              chart.draw(data, options);
                            }
                            google.setOnLoadCallback(corridor_chart);   
        });

Answer 1

在我看来，您需要将数据数组构建到变量中，然后在图表选项定义中使用该变量。

所以，我假设你有一个 json 对象数组(也许是对的，也许不取决于数据的返回方式，但很可能......)

var sql_statement3 = "SELECT bridge_id, bridge_health, milemarker FROM TABLE_NAME &api_key=MY_API_KEY&callback=?";


$.getJSON('https://MY_USERNAME.cartodb.com/api/v2/sql/?q='+sql_statement3, function(data) {

// initialize your array
var chartData = [];

chartData.push(  ['Bridge', 'MileMarker', '', '', 'Health'] )


/* loop over sql data, and populate array
   you can be more compact about this, but
   this is a bit more readable...
*/
for (var i = 0; i < data.rows.length; i++) 
{
   var row = data.rows[i];
   console.log ( row);
   var dataRow = [ 
      row.bridge_id, 
      row.milemarker,
      0, 
      i.toString(),
      row.bridge_health
      ];

   chartData.push( dataRow );

}

/* then call your charting func, but pass in the data
  instead of computing it in that func.
  */
corridor_chart( chartData );

}

function corridor_chart( data ) {

  // don't compute data in here - it is passed in.
  //  ...


}

顺便说一句:

您只需要一个迭代循环来构建这个数组 - 而不是两者:

 $each(data.rows...) //   --OR--
 for (i in data.rows)

另外 - 如果您的数据以数组形式返回，您可能需要使用

for (var i = 0; i < data.rows.length; i++) .

如果您的数据作为对象返回，那么您建议的方法就很不错:

  for (row in data.rows)

后一个迭代循环实际上是为了迭代对象。