Ошибка при создании Google Chart с использованием локального файла CSV - PullRequest
Новая
       7

Ошибка при создании Google Chart с использованием локального файла CSV

0 голосов
/ 13 февраля 2019

У меня есть файл 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

У меня возникли проблемы при создании диаграммы из локального файла CSV, который я загружаю для использования с Google Charts API.Я новичок в использовании Google Charts, поэтому кто-то может помочь мне понять, что я делаю неправильно?Спасибо.

1 Ответ

0 голосов
/ 13 февраля 2019

здесь есть несколько проблем ...

во-первых, следующее утверждение load неверно, оно для старой версии гугл-чартов.

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

его следует заменить на ... 

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

см. обновить код загрузчика библиотеки для получения дополнительной информации ...

затем вам нужно дождаться завершения оператора 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);

EDIT

, если вы получили сообщение об ошибке ...

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

это означает, что значения для столбцов оси Y форматируются как строки, а не числа.(столбцы> 0)

, чтобы исправить проблему, добавить вычисляемый столбец в представление,
и проанализировать значение как число с плавающей запятой.

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)
}]);
...