Google apps script 垂直显示嵌入式组合图

我正在尝试使用嵌入式ComboChartBuilder显示一个组合到一条直线上的条形图。 为此，我使用以下代码和数据：

function createChartSerie() {
    
    var ss = SpreadsheetApp.openById('XXX...');
    var sheet = ss.getSheetByName("sheet1");
    
    var chartTableXRange = sheet.getRange("A1:A24");
    var chartTableYRange = sheet.getRange("B1:C24");
      
    var chart = sheet.newChart()
      .setOption('useFirstColumnAsDomain', true)
      .setOption('hAxis', {
          title: 'X',
          format: '#,##'
        })
        .setOption('vAxes', {0: {
          title: 'Y', format: '#,##'
        }})
        .setChartType(Charts.ChartType.COMBO)
        .addRange(chartTableXRange) // x axis
        .addRange(chartTableYRange) //first y data
        .setPosition(5, 5, 0, 0)
        .setOption('orientation', 'vertical')
        .setOption('series', {
        0: {
          type: 'line', 
          color: 'red'
        },
        1: {
          type: 'bars', 
          color: 'blue'
        }
      })
        .build();
    
    sheet.insertChart(chart);
    }

用于显示组合图的数据范围：

A   B   C
1   0.0001  0
1.5 0.0009  0.0006
2   0.0044  0.0037
2.5 0.0175  0.0133
3   0.054   0.0236
3.5 0.1296  0.0533
4   0.242   0.0073
4.5 0.3522  0.2468
5   0.399   0.0843
5.5 0.3522  0.3352
6   0.242   0.2201
6.5 0.1296  0.0607
7   0.054   0.0256
7.5 0.0175  0.0006
8   0.0044  0.003
8.5 0.0009  0.0005
9   0.0001  0.0001

选项.setOption（'orientation'，'vertical'）似乎没有任何效果，如下图所示：

与google visualization一起使用时，此选项运行良好，如中所示。

Answer 遗憾的是，Sheets API不支持此选项（）

似乎有一个问题。您可以单击白色的“开始”(☆) 所以谷歌知道你希望这样做

权变措施 有两种解决方法：在web上使用Google图表本身（与WebApps和modals一起使用），并使用Google图表生成图表，将页面上的SVG转换为PNG并将其嵌入到电子表格中。生成PNG需要创建一个模式，因此这组说明适用于这两种解决方法

步骤1：制作一个使用谷歌图表制作图表的页面 获取一些模拟数据，制作图表，根据自己的喜好进行设计，确保一切正常

第2步：使用模态显示 添加一个名为

Chart

（您可以更改名称，但需要在代码中更改）的新HTML文件，并粘贴所做的代码

一旦您有了模拟图表，我们需要使用模式来显示它。我们首先需要在电子表格中添加一个菜单：

函数onOpen（）{ SpreadsheetApp.getUi（） .createMenu（'图表生成器'） .addItem（'创建和插入图表'，'显示图表'） .addToUi（） } 然后我们添加显示模态的函数：

函数显示图（）{
const html=HtmlService.createHtmlOutFromFile（'图表'）
.设置宽度（900）
.设置高度（600）
SpreadsheetApp.getUi（）.showModalDialog（html，“图表”）
}

您还可以使用相同的模板设置WebApp：

函数doGet（e）{
返回HtmlService.createHtmlOutFromFile（'图表'）
.设置宽度（900）
.设置高度（600）
}

步骤3：从电子表格中获取数据 现在是删除模拟数据并获取实际数据的时候了。为此，我们将使用

google.script.run

函数异步加载数据。此示例使用异步逻辑，以便并行加载图表库和数据

google.charts.load（'current'，{'packages'：['corechart']}）
const readyPromise=toAsync（resolve=>google.charts.setOnLoadCallback（resolve））
const dataPromise=toAsync（（解析、拒绝）=>{
google.script.run
.withSuccessHandler（解析）
.withFailureHandler（拒绝）
.getData（）
})

toAsync

是一个帮助函数，确保在出现故障回调未处理的错误时拒绝：

函数toAsync（回调）{ 返回新承诺（（解决、拒绝）=>{ 试一试{ 回调（解析、拒绝） }捕获（e）{ 拒绝（e） } }) } 然后，我们需要在Google Apps脚本中添加实际从电子表格读取数据的功能：

函数getData（）{ 返回SpreadsheetApp.getActiveSpreadsheet（） .getSheetByName（“Sheet1”） .getRange（'A1:C18'） .getValues（） } 然后只需在主功能中使用这两个选项：

异步函数drawVisualization（）{ const el=document.getElementById（'chart\u div'） 待命 const data=google.visualization.arrayToDataTable（等待数据承诺） 常量选项={…} 新google.visualization.ComboChart（el）.draw（数据，选项） } 确保呼叫处理承诺拒绝，否则您可能会在不知不觉中消除错误：

document.addEventListener（'DOMContentLoaded'，（）=>drawVisualization（）.catch（console.error））

（可选）步骤4：将图表嵌入为PNG 谷歌图表生成SVG。不幸的是，我们无法嵌入SVG，因此需要将其转换为PNG。最简单的方法是使用外部库，如

canvg

，它允许我们将SVG绘制到画布中。然后我们可以将画布导出为PNG

将画布添加到身体，将库添加到头部

然后，您可以使用（附加到

drawVisualization

）在画布上绘制：

const canvas=document.querySelector（'canvas'）
const ctx=canvas.getContext（'2d'）
v=canvg.canvg.fromString（ctx，el.getElementsByTagName（'svg'）[0].outerHTML）
v、 开始（）
等待，等待准备

这将绘制它并等待它完成

现在我们需要一种将生成的图像发送到GAS的方法，这样它就可以嵌入它。谢天谢地，我们可以获得PNG的base64并将其发送到那里：

const base64=canvas.toDataURL（'image/png'）.split（'；base64'）[1]
等待同步（（解析、拒绝）=>{
google.script.run
.withSuccessHandler（解析）
.withFailureHandler（拒绝）
.insertChart（base64）
})

在谷歌应用程序脚本中，我们定义了

insertChart

：

函数insertChart（base64png）{
const blob=Utilities.newBlob(
base64Decode（base64png，Utilities.Charset.US_ASCII），
“图像/png”，
'chart.png'
)
SpreadsheetApp.getActiveSpreadsheet（）
.getSheetByName（“Sheet1”）
.insertImage（blob，5，5，0，0）
}

（可选）步骤5：在生成图表时关闭模式并隐藏图表 现在插入了它，我想自动关闭模式。要这样做，只需将其附加到

drawVisualization

：

google.script.host.close（）

我也喜欢在处理时不显示图表。一点CSS就足够了：

canvas，#图表_div{
可见性：隐藏；
}
身体{
溢出：隐藏；
}

无法使用

display:none

，因为这样会生成错误大小的图表。设置溢出是为了避免滚动条变为空

您还可以将屏幕标题甚至加载动画更改为模式

工具书类