使用图表 API 在 Google AppMaker 中创建散点图

Question

Appmaker 内置了折线图和条形图，但没有内置散点图。

我似乎可以从 AppMaker 脚本中访问 Charts.newScatterChart()（当我尝试在脚本中使用它时，它会出现在自动完成中）。但是，我看不到如何在 UI.

中显示这些图表

如何使用图表 API 创建散点图并将其显示在我的 AppMaker UI 中？

Answer 1

不幸的是，App Maker 无法帮助您处理它不支持开箱即用的图表。所以，我们需要经历一段激动人心的旅程。

首先我们需要弄清楚并发性。在我们接收要呈现的数据之前，我们需要在客户端上安装图表脚本，以避免大量重复检查和内联初始化。为此，我们需要将选择的可视化库添加为外部 JavaScript 资源并处理其负载。在这个答案中，我将使用 Google's Material Scatter Chart 作为参考。这是它的加载程序库 https://www.gstatic.com/charts/loader.js

// onAppStart event handler
loader.suspendLoad();

google.charts
      .load('current', { 'packages': ['scatter'] })
      .then(function(){
         loader.resumeLoad();
      });

第一步的结果是这样的

准备数据模型。它可以是 Calculated or real one。该模型应至少包含 to 个数字字段（一个用于 x-axis，一个用于 y-axis）。
为图表添加容器可以是 HTML 或面板小部件。
将您的小部件容器绑定到模型的数据源
将数据源的项目映射到图表的 DataTable

// chart container's onDataLoad event handler
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');

var rows = [];

widget.datasource.items.forEach(function(item) {
  rows.push([item.X, item.Y1, item.Y2]);
});

data.addRows(rows);

var chart = new google.charts.Scatter(widget.getElement());

// If you are using built-in App Maker charts you can
// encounter this issue 
chart.draw(data);

使用图表 API 在 Google AppMaker 中创建散点图

Using the Charts API to create a scatter chart in Google AppMaker

google-apps-script

google-app-maker