我不是程序员
我想从 .CSV 文件绘制 Google 可视化图表
我有如下 .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>
不幸的是无法工作，给我一个空白页
首先，需要确保您正在调用google的
loadgoogle.charts.load('current', {packages: ['corechart']});
并且您可以使用
load接下来，
optionsdraw请参阅以下片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
// 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.
var options = {};
options.title = "Temperature vs. Time";
options.width = 600;
options.height = 400;
// Draw the chart.
chart.draw(data, options);
});