使用谷歌图表读取 csv 时出错答案

【问题标题】：Error reading csv with google chart使用谷歌图表读取 csv 时出错
【发布时间】：2018-04-20 21:34:57
【问题描述】：

实现以下代码，以便能够读取我拥有的文件，但不明白 csv 文件有什么问题。

csv文件的结构是：

“字数”、“数量”

苹果，45

蔬菜，60

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prueba de Google Chart</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript" src="jquery.csv.js"></script>
    <script type="text/javascript">
    google.charts.load('visualization','1', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);


function drawChart() {
   // grab the CSV
   $.get("palabras1.csv", function(csvString) {
      // transform the CSV string into a 2-dimensional array
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

      // this new DataTable object holds all the data
      var data = new google.visualization.arrayToDataTable(arrayData);

      // this view can select a subset of the data at a time
      var view = new google.visualization.DataView(data);
      view.setColumns([0,1]);

     // set chart options
     var options = {
        title: "A Chart from a CSV!",
        //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'
     };

     // create the chart object and draw it
     var chart = new google.visualization.BarChart(document.getElementById('chart'));
     chart.draw(view, options);
  });
}

    </script>
</head>
<body>
    <div id="chart_div"></div>
</body>
</html>

在查看浏览器调试器时显示以下错误：

Error de lectura XML: mal formado
Ubicación: file:///home/eparionad/Descargas/palabras1.csv
Número de línea 1, columna 9:

他们可以向我解释错误是什么。

【问题讨论】：

您的实际 .csv 文件是什么样的？
我上传到这个地址：storage.googleapis.com/audiosparareconocimiento/palabras.csv

标签： jquery google-visualization

【解决方案1】：

你load的说法不正确，
似乎是旧参数的新版本...

替换 --> 'visualization','1'

与 --> 'current'

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
   $.get('https://storage.googleapis.com/audiosparareconocimiento/palabras.csv', function(csvString) {
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
      var data = new google.visualization.arrayToDataTable(arrayData);
      data.sort([{column: 1, desc: true}]);
      var options = {
        chartArea: {
          height: '100%',
          width: '100%',
          top: 64,
          left: 120,
          right: 32,
          bottom: 48
        },
        hAxis: {
          textStyle: {
            fontSize: 12
          }
        },
        height: data.getNumberOfRows() * 20,
        title: 'A Chart from a CSV!',
        legend: 'none',
        vAxis: {
          textStyle: {
            fontSize: 12
          }
        },
        width: '100%'
      };
      var chart = new google.visualization.BarChart(document.getElementById('chart'));
      $(window).resize(function () {
        chart.draw(data, options);
      });
      chart.draw(data, options);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

【讨论】：