谷歌图表-图表为空白

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

有几个问题(除了亨里克的答案外)

1. 您必须在downLoadUrl回调中绘制图表
2. getAttribute是一种方法，它必须是markers[i].getAttribute("alt")
3. 必须将高度转换为数字，目前它是一个字符串(xml-属性总是字符串类型)
4. 您使用push的方式是错误的，对每个标记添加2行，对id添加1，对于高度添加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);   
  });
}

Answer 2

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

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

数组的正确格式应该是：

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