gpt4 book ai didi

javascript - 使用谷歌脚本创建折线图 - 谷歌表作为数据源

转载 作者:行者123 更新时间:2023-12-03 00:39:32 25 4
gpt4 key购买 nike

嗨,有一个谷歌表格数据,其数据如下所示

DATE              LSL LCL DATA UCL USL
16 - Nov - 2018 1 3 2.3 7 9
17 - Nov - 2018 1 3 3.1 7 9
18 - Nov - 2018 1 3 2.7 7 9
19 - Nov - 2018 1 3 4.9 7 9
20 - Nov - 2018 1 3 5 7 9
21 - Nov - 2018 1 3 3 7 9
22 - Nov - 2018 1 3 10 7 9
23 - Nov - 2018 1 3 7.8 7 9
24 - Nov - 2018 1 3 4.5 7 9
25 - Nov - 2018 1 3 5.4 7 9
26 - Nov - 2018 1 3 2.2 7 9
27 - Nov - 2018 1 3 4.9 7 9
28 - Nov - 2018 1 3 5.8 7 9
29 - Nov - 2018 1 3 4.9 7 9

我希望开发一个网络脚本/谷歌脚本来利用谷歌表格中的数据绘制折线图。我不想在应用程序脚本中构建数据表并构建图表,而是通过从谷歌工作表获取数据来直接构建图表。

这是我开发的代码。

第一个代码 - 这是一个 .gs 文件 - 文件名:Code.gs

function doGet(e) {

return HtmlService
.createTemplateFromFile("index")
.evaluate()
.setTitle("Google Spreadsheet Chart")
.setSandboxMode(HtmlService.SandboxMode.IFRAME);

}

function getSpreadsheetData() {

var ssID = "1WFV48PNNGw9Pvrj9dQ1vYD-kF1zvxMo_02VIbKBYicQ",
sheet = SpreadsheetApp.openById(ssID).getSheets()[0],
data = sheet.getDataRange().getValues();

return data;

}

第二个文件 - HTML。文件名:index.html

代码如下。

<!DOCTYPE html>
<html>

<head>

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

<body>

<div id="main"></div>

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

google.charts.setOnLoadCallback(getSpreadsheetData);

function getSpreadsheetData() {
google.script.run.withSuccessHandler(drawChart).getSpreadsheetData();
}

function drawChart(rows) {

var options = {
title: 'Line Chart',
legend: 'none',
chartArea: {
width: '60%'
},

vAxis: {
textStyle: {
fontFamily: 'Arial',
fontSize: 12
}
}
};

var data = google.visualization.arrayToDataTable(rows, false),
chart = new
google.visualization.LineChart(document.getElementById("main"));
chart.draw(data, options);
}
</script>
</body>

</html>

不知道我哪里弄错了。当我尝试发布时,仪表板是空的。非常感谢任何形式的帮助。

预期结果是

预期结果

最佳答案

在 html 中,您有一个 id = "main" 的 div

<div id="main"></div>

但是,在 JavaScript 中,您尝试在 id = "curve_chart" 的容器中绘制图表

chart = new google.visualization.LineChart(document.getElementById("curve_chart"));

ID 需要匹配

另外,建议清理 html 中的空白,
我也见过这会引起问题

来自...

<
div id = "main" > < /div>

到...

<div id="main"></div>
<小时/>

注意:建议使用loader.js加载库,而不是jsapi

根据release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

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

这只会改变load语句...

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

关于javascript - 使用谷歌脚本创建折线图 - 谷歌表作为数据源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53516815/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com