如何在Google AppMaker中利用Charts API创建并展示散点图

嘿，我之前刚好解决过类似的问题！虽然AppMaker内置没有散点图组件，但确实可以通过脚本和UI组件结合来实现，下面给你两种实用的方案：

方案1：用Image组件展示静态散点图图片 #

这种方法适合只需要静态展示的场景，步骤很简单：

1. 写个服务器端脚本生成图表URL
   在AppMaker的服务器脚本里新建一个函数，用Charts.newScatterChart()生成图表，然后拿到它的图片URL：

function getScatterChartImageUrl() {
  // 初始化散点图并配置基础属性
  var scatterChart = Charts.newScatterChart()
    .setTitle('用户行为数据散点图')
    .setXAxisTitle('操作次数')
    .setYAxisTitle('停留时长')
    .setDimensions(600, 400); // 按需调整尺寸

  // 构造数据表格，这里可以替换成你的实际数据
  var dataTable = Charts.newDataTable()
    .addColumn(Charts.ColumnType.NUMBER, '操作次数')
    .addColumn(Charts.ColumnType.NUMBER, '停留时长')
    .addRow([12, 45])
    .addRow([23, 67])
    .addRow([18, 32])
    .addRow([35, 89])
    .addRow([27, 56]);

  scatterChart.setDataTable(dataTable);

  // 返回临时图片URL（注意：这个URL有效期大概几小时，适合即时展示）
  return scatterChart.getAsImageUrl();
}

2. 绑定到UI的Image组件

• 在页面拖入一个Image组件，调整好大小。
• 选中组件，在右侧属性面板的「Source」里选择「绑定到数据源」，然后选刚才写的getScatterChartImageUrl()函数。
• 运行应用就能看到散点图啦！

方案2：用HTML组件渲染交互式散点图 #

如果需要悬停提示、缩放这类交互功能，推荐用Google Charts的JS库结合HTML组件来实现：

1. 添加HTML组件到页面
   拖入一个HTML组件，把它的尺寸调整到你需要的大小（比如占满整个容器）。

2. 编写HTML内容
   在HTML组件的「Content」属性里粘贴下面的代码，你可以根据自己的需求修改标题、数据和样式：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawScatterChart);

      function drawScatterChart() {
        // 构建数据表格
        var data = new google.visualization.DataTable();
        data.addColumn('number', '操作次数');
        data.addColumn('number', '停留时长');
        data.addRows([
          [12, 45], [23, 67], [18, 32], [35, 89], [27, 56]
        ]);

        // 配置图表选项
        var options = {
          title: '交互式用户行为散点图',
          hAxis: {title: '操作次数', minValue: 0, maxValue: 40},
          vAxis: {title: '停留时长（秒）', minValue: 0, maxValue: 100},
          legend: 'none',
          tooltip: {trigger: 'both'} // 开启悬停提示
        };

        // 渲染散点图到指定容器
        var chart = new google.visualization.ScatterChart(document.getElementById('scatterContainer'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body style="margin:0;">
    <div id="scatterContainer" style="width: 100%; height: 100%;"></div>
  </body>
</html>

3. （可选）绑定动态数据
   如果要从AppMaker的数据源拉取实时数据，可以在页面的onAttach事件里写客户端脚本，把数据传递给HTML组件：

// 从你的模型中查询数据，替换成实际的模型和字段
var userData = app.models.UserBehavior.newQuery().run();
var chartData = userData.map(function(item) {
  return [item.operationCount, item.stayDuration];
});

// 获取HTML组件并替换数据
var htmlChart = app.currentPage.descendants.ScatterChartHtml;
htmlChart.properties.content = htmlChart.properties.content.replace(
  "data.addRows([[12, 45], [23, 67], [18, 32], [35, 89], [27, 56]]);",
  "data.addRows(" + JSON.stringify(chartData) + ");"
);

小提示 #

• 方案1的临时URL有效期不长，如果需要长期展示，建议把图片保存到Google Drive，再引用Drive的公开链接。
• 方案2的交互性更强，还能自定义更多样式，适合复杂的展示需求。

内容的提问来源于stack exchange，提问作者emmby