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

我相信你要么使用arrayToDataTable错误，要么输入格式错误。

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

正确的数组格式应该是：

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

Answer 2

有几个问题（除了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);   
  });
}