Google Charts加载外部CSV文件失败，页面空白问题求助

问题背景 #

原有静态Google Charts代码可正常生成堆叠柱形图，但替换为加载外部data.csv后页面空白，相关代码如下：

可正常运行的静态代码 #

<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 = 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': ','});

CSV文件内容 #

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

错误原因 #

1. Google Charts DataTable无load方法：google.visualization.DataTable并没有内置的load方法用于直接加载外部CSV文件，你写的data.load()是无效调用，这是核心问题。
2. 异步加载未处理：即使存在加载方法，CSV文件加载是异步操作，直接后续调用chart.draw()会因为数据未加载完成而失败，必须在数据加载完成后再执行绘制逻辑。

修正方案 #

使用fetch API异步获取CSV内容，解析为二维数组后，再用google.visualization.arrayToDataTable转换为图表可识别的数据格式，最后执行绘制。修正后的完整代码如下：

<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);

      async function drawChart() {
        // 异步获取CSV文件内容
        const response = await fetch('data.csv');
        const csvText = await response.text();
        
        // 解析CSV为二维数组
        const rows = csvText.split('\n').filter(row => row.trim() !== '');
        const dataArray = rows.map(row => {
          const columns = row.split(',');
          // 第一行是表头，直接保留；后续行转换数值类型
          return rows.indexOf(row) === 0 ? columns : [columns[0], Number(columns[1]), Number(columns[2]), Number(columns[3])];
        });

        // 转换为Google Charts数据格式
        const data = google.visualization.arrayToDataTable(dataArray);

        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>

额外注意事项 #

• 确保data.csv和HTML文件在同一目录下，或者使用正确的相对/绝对路径。
• 如果在本地直接打开HTML文件（file://协议），可能会遇到跨域限制，建议使用本地服务器（比如Python的python -m http.server）运行页面。

内容的提问来源于stack exchange，提问作者dataflowjoe