Question

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

csv文件的结构是：

＆＃39;单词＆＃39;，＆＃39;数量＆＃39;

apple，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:

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

Answer 1

你load陈述不正确，
似乎是带有旧参数的新版本......

替换 - ＆gt; 'visualization','1'

with - ＆gt; 'current'

请参阅以下工作代码段...

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>

使用谷歌图表阅读csv时出错

1 个答案: