javascript - 谷歌图表 - 图为空白

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-attributes 始终是字符串类型)
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);   
  });
}