图像部分的动态（非冻结）着色答案

【问题标题】：Dynamic (not frozen) coloring of image parts图像部分的动态（非冻结）着色
【发布时间】：2020-01-21 14:07:16
【问题描述】：

我需要您的专业知识来创建绩效仪表板。假设我是汽车制造商。作为这家很棒的公司的老板，我需要对我的制造过程有一个整体的了解。我的建议是在仪表板上添加我的产品的背景图片：

如何应用一些图层来动态更新每个工作项（门、轮子...）的状态，例如：

在这个例子中，老板需要把注意力集中在这辆漂亮汽车的前门上！

所以现在，一些上下文。我想做一些 Google Apps Script / Javascript 来更新嵌入网站的图像每个部分的颜色（固定颜色：红色/琥珀色/绿色）。代码应该在页面加载期间的某处读取数据（例如，在谷歌表格或其他数据库中）并应用正确的画布/图层或您可以建议的任何好主意。必须有，在此图像的每个部分关联链接以深入了解每个主题。

你建议我选择哪个方向？

【问题讨论】：

虽然我喜欢你的问题并且很想回答它，但恐怕这里不是问“什么是最好的方法-...”类型的地方-的问题。正如您可能知道的那样，您应该就特定的编码问题提出问题，例如如果您尝试自己解决问题并遇到麻烦。为了给你一点提示，你可以从一个简单的文本文件中读取每个开发阶段的状态，并用适当的颜色为覆盖的 svg 元素着色。
作为一般提示：Apps Script Web Apps 对于链接服务器端内容（来自 Google 表格）和客户端（嵌入网站中的图像）非常有用：developers.google.com/apps-script/guides/web
@obscure 感谢您的友好反馈。我正在探索 SVG 方向，似乎是正确的方式。
@ziganotschka 是的，我已经熟悉 Apps Script Web Apps，并希望使用 GAS 来做这些事情并部署为 Web 应用程序。
正如@obscure 指出的那样，这不是一般问题的地方，但我在回答中为您提供了实现您的请求的一般工作流程。我建议您尝试按照此工作流程编写代码，如果您卡在某个地方 - 使用您的代码发布一个问题，指定您遇到的具体问题。我希望这会有所帮助！

标签： javascript html google-apps-script

【解决方案1】：

使用 Apps 脚本的一般工作流程：

创建Web App。
在 Web 应用程序的 .gs 文件（服务器端）中实现一个函数，该函数将从电子表格中提取和返回数据（分配给每个汽车部件的颜色值）
在Web App的html文件中，使用google.script.run调用服务端函数。
使用参数实现withSuccessHandler 函数，该函数将使用从JS 函数中的服务器端拉取的数据。
JS 函数可以创建/修改您网站的innerHTML，将检索到的颜色值分配给您的图像。
将您的 WebApp 的 URL 嵌入到您的网页中。
刷新您的网页时会刷新数据。或者，您可以实现Web Polling 以在指定的时间间隔内自动刷新数据。

【讨论】：