带有CSV文件的Google Charts

hzbexzde 于 2023-04-27 发布在 Go

关注(0)|答案(1)|浏览(138)

我有下面的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.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文件是空白的，我想知道我哪里出错了。提前感谢您的任何帮助或指针，你可以给予我。

csv

来源：https://stackoverflow.com/questions/76115743/google-charts-with-csv-file

1条答案

按热度按时间

a6b3iqyw1#

首先，确保Google Charts被加载到HTML文档中。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

然后使用Google Visualization API创建一个图表并定义一个回调函数：

function create() {
  var foo = new google.visualization.Query('data.csv');
  foo.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  var data = response.getDataTable();
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, { width: 600, height: 440 });
}

图表将通过以下方式加载：

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

最后，在HTML中简单地创建一个图表的div。

赞(0）回复(0）举报 2023-04-27

我来回答

带有CSV文件的Google Charts

1条答案

相关问题

热门标签

最新问答