使用CSV文件的Google图表

Question

使用CSV文件的Google图表

javascripthtmlcsvchartsgoogle-visualization

3

我有以下HTML代码，可以使用Google Charts生成堆叠柱状图。我想用外部CSV文件替换HTML中的静态数据，但无法使其正常工作。

静态示例（这个可以正常工作）：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Day', 'Status A', 'Status B', 'Status C'],
          ['Monday', 10, 5, 3],
          ['Tuesday', 8, 2, 6],
          ['Wednesday', 6, 4, 10],
          ['Thursday', 12, 8, 4],
          ['Friday', 4, 12, 2],
          ['Saturday', 6, 4, 8],
          ['Sunday', 10, 6, 4]
        ]);

        var options = {
          title: 'Status Values by Day',
          isStacked: true
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

我已经用以下代码块替换了 var data 块，以引用一个名为 'data.csv' 的文件。

var data = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'Status A');
data.addColumn('number', 'Status B');
data.addColumn('number', 'Status C');
data.load('data.csv', {'header': true, 'delimiter': ','});

'data.csv'文件的格式如下，我已经将它放在与HTML文件相同的文件夹中。

Day,Status A,Status B,Status C
Monday,10,5,3
Tuesday,8,2,6
Wednesday,6,4,10
Thursday,12,8,4
Friday,4,12,2
Saturday,6,4,8
Sunday,10,6,4

当我打开HTML文件时，它是空白的，我想知道我哪里出错了。非常感谢您提供的任何帮助或指针。

- dataflowjoe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Valeriia · Accepted Answer

你可以直接在HTML中按照以下方式完成：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(createChart);

      function createChart() {
        var chartData = new google.visualization.Query('data.csv');

        var options = {
            title: 'Custom chart',
            isStacked: true
        };

        chartData.send(function(response) {
          if (response.isError()) {
          console.error('Error message: ' + response.getMessage());
          return;
        }
        var dataTable = response.getDataTable();
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(dataTable, options);
    });
    }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 440px;"></div>
  </body>
</html>

或者作为一个选项，您可以用指向包含代码的 .js 文件的引用来替换脚本代码。

<script type="text/javascript" src="chartCreator.js"></script>