Question

我有一个HTML文件，我在其中上传本地CSV文件，一旦上传，我想使用Google Charts API从该数据生成图表，但是目前出现此错误

script.js:29 Uncaught TypeError: Cannot read property 'arrayToDataTable' of undefined

这指向JavaScript文件中的行

  var dataDraw = new google.visualization.arrayToDataTable(data);

这是index.html

    <html>
    <head>
    <meta charset="utf-8" />
    <title>CSV to chart</title>
    </head>

    <body>
      <div id="inputs" class="clearfix">
        <input type="file" id="files" name="files[]" multiple />
      </div>
      <hr />
      <output id="list">
      </output>
      <hr />
      <table id="contents" style="width:100%; height:400px;" border>
      </table>
      <div id="chart"></div>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <script src="http://evanplaice.github.io/jquery-csv/src/jquery.csv.min.js"></script>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script src="script.js"></script>
    </body>
</html>

这是Javascript文件

    $(document).ready(function() {

    $('#files').bind('change', handleFileSelect);

});

function handleFileSelect(evt) {
  var files = evt.target.files; 
  var file = files[0];
  printTable(file);
}

function printTable(file) {
  var reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function(event){
    var csv = event.target.result;
    var data = $.csv.toArrays(csv);


    google.load("visualization", "1", {packages:["corechart"]});    

    var dataDraw = new google.visualization.arrayToDataTable(data);

    var view = new google.visualization.DataView(dataDraw);
    view.setColumns([0,1]);


    var options = {
      title: "CSV Chart",
      hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
      vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
      legend: 'none'
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
    chart.draw(view, options);

    console.log("array of data " + data)
    var html = '';  
    for(var row in data) {
      html += '<tr>\r\n';
      for(var item in data[row]) {
        html += '<td>' + data[row][item] + '</td>\r\n';
      }
      html += '</tr>\r\n';
    }
    $('#contents').html(html);
  };
  reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
}

这是我正在上传的CSV。

Temp,Number
69,1
23.5,2
2.3,3

我无法从要上传到Google Charts API的本地CSV文件生成图表。我对使用Google图表非常陌生，因此有人可以帮助我了解我在做什么错吗？谢谢。

Answer 1

这里有几个问题...

首先，以下load语句不正确，它适用于旧版的Google图表。

google.load("visualization", "1", {packages:["corechart"]});

应将其替换为...

google.charts.load('current', {packages: ['corechart']});

有关更多信息，请参见update library loader code

接下来，您需要等待load语句完成，
在使用任何Google图表组件之前，
有几种方法...

1）您可以使用load语句返回的承诺。

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // place chart code here
});

2）使用callback语句的load属性。

google.charts.load('current', {
  packages: ['corechart'],
  callback: function () {
    // place chart code here
  }
});

3）使用setOnLoadCallback回调方法。

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(function () {
  // place chart code here
});

很明显，您可以使用自己命名的名称替换上述任何匿名功能，例如

google.charts.load('current', {
  packages: ['corechart'],
  callback: drawChart
});

注意：arrayToDataTable是 static 方法，不需要new关键字...

var dataDraw = google.visualization.arrayToDataTable(data);

编辑

如果收到错误...

Data for column(s) axis #0 cannot be of type String

这意味着y轴列的值格式为字符串，而不是数字。（列> 0）

要解决此问题，请在视图中添加一个计算列，
并将值解析为float。

var view = new google.visualization.DataView(dataDraw);
view.setColumns([0, {
  calc: function (dt, row) {
    return parseFloat(dt.getValue(row, 1));
  },
  type: 'number',
  label: dataDraw.getColumnLabel(1)
}]);

使用本地CSV文件生成Google图表时出错

1 个答案: