我有以下 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文件时它是空白的，我想知道我哪里出错了。 预先感谢您给我的任何帮助或指示。
首先，确保 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。