从.CSV文件绘制Google可视化图表

9nvpjoqh 于 2023-09-28 发布在 Go

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

我不是程序员
我想从.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>

不幸的是没有工作给我一个空白页

csv

来源：https://stackoverflow.com/questions/76945621/drawing-a-google-visualization-chart-from-csv-file

1条答案

按热度按时间

5f0d552i1#

首先，需要确保你调用的是谷歌的load语句，在提供的代码中没有看到它。

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

您可以使用load语句返回的promise来了解页面何时加载。
接下来，options应该是一个单独的变量，并作为第二个参数传递给draw方法。
看下面的片段……

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

编辑

然后注意到
你需要使用下面的网址来加载谷歌图表.

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

jsapi已被弃用...
请参见更新库加载程序代码

赞(0）回复(0）举报 2023-09-28

我来回答

从.CSV文件绘制Google可视化图表

1条答案

相关问题

热门标签

最新问答