使用CSV文件绘制Google Visualization图表失败：页面空白求助

我并非程序员，尝试通过CSV文件绘制Google Visualization温度随时间变化的折线图，但页面运行后显示空白。

我的CSV文件（命名为temp.csv）内容：

time,temperature
2023-08-21 12:00:00,25
2023-08-21 12:01:00,26
2023-08-21 12:02:00,27

我编写的原代码：

<!DOCTYPE html>
<html>
<head>
<title>Temperature vs. Time Chart</title>
<script src="https://www.google.com/jsapi"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.csv/0.71/jquery.csv.min.js"></script>
</head>
<body>
<div id="chart"></div>

<script>
// Load the Google Visualization API and the jQuery-CSV library.
google.load("visualization", "1", {packages: ["corechart", "controls"]});
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/jquery.csv/0.71/jquery.csv.min.js");

// Function to draw the chart.
function drawChart() {
  // Get the data from the CSV file.
  var csvData = $.csv("temp.csv");

  // Create a new DataTable object from the CSV data.
  var data = new google.visualization.arrayToDataTable(csvData);

  // Create a new chart object.
  var chart = new google.visualization.LineChart(document.getElementById("chart"));

  // Set the chart options.
  chart.options.title = "Temperature vs. Time";
  chart.options.width = 600;
  chart.options.height = 400;

  // Draw the chart.
  chart.draw(data);
}

// Call the drawChart() function when the page loads.
google.setOnLoadCallback(drawChart);
</script>
</body>
</html>

问题修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Temperature vs. Time Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.csv/0.71/jquery.csv.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
        // 加载Google图表库
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(fetchAndDrawChart);

        function fetchAndDrawChart() {
            // 通过AJAX获取CSV文件内容
            $.get("temp.csv", function(csvText) {
                // 解析CSV为二维数组
                var csvArray = $.csv.toArrays(csvText);
                
                // 将字符串时间转换为Date对象，让图表识别为时间轴
                for (var i = 1; i < csvArray.length; i++) {
                    csvArray[i][0] = new Date(csvArray[i][0]);
                }

                // 创建Google图表DataTable
                var data = google.visualization.arrayToDataTable(csvArray);

                // 定义图表配置选项
                var options = {
                    title: 'Temperature vs. Time',
                    width: 600,
                    height: 400,
                    hAxis: {
                        title: 'Time',
                        format: 'HH:mm'
                    },
                    vAxis: {
                        title: 'Temperature (°C)'
                    }
                };

                // 初始化折线图并绘制
                var chart = new google.visualization.LineChart(document.getElementById('chart'));
                chart.draw(data, options);
            });
        }
    </script>
</body>
</html>

关键错误点说明 #

• CSV加载方式错误：原代码中$.csv("temp.csv")不是正确的文件读取方法，需用$.get获取文本后，通过$.csv.toArrays()解析为数组。
• Google图表加载API过时：google.load已被弃用，改用官方推荐的google.charts.load加载最新版本库。
• 图表选项设置错误：不能直接修改chart.options，需创建独立的options对象并传入chart.draw()方法。
• 时间数据未转换类型：CSV中的时间是字符串，Google图表无法识别为连续时间轴，需转换为Date对象。
• 重复加载库：原代码同时在<head>和脚本中加载jquery.csv，只需加载一次即可。

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