Google图表 - 图表为空白

Question

使用mysql/php/js尝试显示曲线图 - 当前图表正在显示,但它是空白的.

google.load('visualization', '1.0', {'packages':['corechart']});

      google.setOnLoadCallback(drawChart);


      function drawChart() {

        var graph = Array();
        downloadUrl("map.php", function (data){
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for(var i =0; i<markers.length; i++){ 
           graph.push([i], [markers[i].getAttribute["alt"]]);
        }   

    });

      var data = google.visualization.arrayToDataTable(graph);
      data.addColumn('number', 'id');
      data.addColumn('number', 'Altitude');

        var options = {
          title: 'Altitude',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }

downloadURL是一种从我的数据库中检索信息的方法 - 寻找高度并简单地绘制它.这个方法绝对可行,因为我也用它来为谷歌地图添加标记......

Answer 1

有几个问题（除了 Henrik 的回答）

1. 您必须在 downLoadUrl 的回调中绘制图表
2. getAttribute是一种方法，它必须是markers[i].getAttribute("alt")
3. 您必须将海拔高度转换为数字，目前它是一个字符串（xml 属性始终为字符串类型）
4. 您使用了push错误的方式，对于每个标记，您添加 2 行，1 表示 id，1 表示海拔

固定代码：

function drawChart() {

  var graph =  [];
  downloadUrl("map.php", function (data){
      var xml     = data.responseXML,
          graph   = [],
          markers = xml.documentElement.getElementsByTagName("marker"),
          //create empty datatable
          data    = new google.visualization.DataTable(),
          options = {
                      title: 'Altitude',
                      curveType: 'function',
                      legend: { position: 'bottom' }
                    },
          chart;
      for(var i = 0; i<markers.length; i++){ 
        graph.push(//a single array(row) with 2 items(columns)
                   [
                    //column 0, id(index) of the marker
                    i,
                    //column 1, alt-attribute, converted to float
                    parseFloat(markers[i].getAttribute("alt"))
                   ]
                  );
      }
      //first add columns to the datatable
      data.addColumn('number', 'id');
      data.addColumn('number', 'Altitude');
      //then add the rows
      data.addRows(graph);

      chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
      chart.draw(data, options);   
  });
}