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 是一种从我的数据库中检索信息的方法——希望检索高度并简单地绘制它。该方法绝对有效，因为我还使用它向 google 地图添加标记...

Answer 1

我认为您使用的 arrayToDataTable 有误，或者输入的格式有误。

查看 documentation for arrayToDataTable 数组应该包含您的列名等，您根本不应该使用 data.addCoulmn()。

数组的正确格式应该是：

array = [
    [{label:'ID', type:'number'},{label:'Altitude',type:'number'}],
    [1,15],
    [2,23]
]

Answer 2

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

必须在downLoadUrl的回调中绘制图表
getAttribute是方法，必须是markers[i].getAttribute("alt")
您必须将高度转换为数字，目前它是一个字符串（xml-属性总是字符串类型）
您使用 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);   
  });
}

Google 图表 - 图表为空白

Google Charts - Graph is blank

javascript

php

mysql

ajax

google-visualization