查看: 108331|回复: 0

[教程] 【App Inventor数据可视化】使用电子表格和图表3：通过比较...

[复制链接]

本帖最后由 szjuliet 于 2023-9-22 20:06 编辑

【App Inventor数据可视化】使用电子表格和图表
Part 3：通过比较多个例子收集证据

编码电子表格组件
编码图表来比较不同湖泊的数据

Part 1：通过图表理解数据
Part 2：通过比较数据集加深理解
Part 3：通过比较多个例子收集证据
Part 4：在App中添加数学模型
附录A：将app连接到自己的数据集
附录B：为Google表格创建一个凭证

Part 3：通过比较多个例子收集证据

到目前为止，Janelle只研究了Spirit Lake的数据。但她当地的湖泊只是地球上数百万个湖泊中的一个。你认为Janelle接下来应该做些什么来论证她所看到的趋势在冬季湖泊中很常见?

如果Spirit Lake的冰真的在减少，这将对她在游泳时湖水中的藻类产生影响。冬天的冰让湖水一整年都更冷些。更温暖的海水使藻类等植物生长得更快。

然而，作为一名科学家，Janelle 告诉自己，她需要为这些趋势提供更多的证据。她问自己：“随着时间的推移，其他湖泊是否也经历着与Spirit Lake相同的变化?”Janelle 在她的app中添加了一个新屏幕来比较多个样本或案例。

与第一个屏幕一样，这个屏幕也有两个图表。不过这个屏幕不是显示同一湖泊的冰和温度，而是显示两个不同湖泊的冰的数据。

1. 向模板添加一个新屏幕。

点击菜单中的“添加屏幕”按钮，将新屏幕命名为“multiCaseScreen”。
新的空屏幕目前为止没有任何组件和代码。

2. 快速建立新设计(使用复制粘贴)

该app将需要两个图表来显示冰期数据，就像Part 2一样。为了节省时间，按照下面的步骤从singleCaseScreen复制和粘贴相同的组件。然后，根据需要修改组件。
- 切换到singleCaseScreen：
- 在singleCaseScreen上，在“组件”中选择屏幕名称，然后在计算机上按“复制”键(Ctrl-c或⌘-c)：
- 回到新的multiCaseScreen，然后在设计器的任何地方点击粘贴到计算机上(Ctrl-v或⌘-v)。来自singleCaseScreen屏幕的所有组件都应该自动填充：
- app将使用新屏幕比较两个湖上的冰。首先，修复一些与剪切粘贴一起出现的旧标签。
  - 在bottomChart的属性中，将描述改为“冰期”：
  - 在bottomChartData2D的属性中，将标签更改为“天数”：

3. 添加Spreadsheet组件(新技能)

在前面的屏幕复制粘贴中，Spreadsheet1组件已经复制到当前屏幕中
但在当前屏幕下，你需要在两个不同的表格上比较两个湖泊。这意味着该app将需要另一个Spreadsheet组件来保存来自不同来源的信息。
使用复制和粘贴方法创建另一个Spreadsheet组件节省时间。选中组件Spreadsheet1，按复制(Ctrl-c或⌘-c)和粘贴(Ctrl-v或⌘-v)
注意，使用复制粘贴会保留一些重要的属性，比如Spreadsheet的id。
自己创建这个来访问自己的电子表格是一项重要的技能，在附录A中有介绍。
现在，这些设置会在Janelle的示例App中正常工作。

4. 完成屏幕1的代码。

切换到屏幕1：
使你的新multiCaseScreen可从Screen1访问。参照下图中上面的代码块作为示例来填充下面的代码块：
当你完成后，两个按钮的代码应该在主屏幕上工作。

5. 完成multiCaseScreen代码。

当你将组件粘贴到组件设计工作面板中后，任何相关的代码都会自动出现在逻辑设计工作面板中。你可以在multiCaseScreen中看到这段代码：
- 现在有一个问题：你粘贴的代码让两个不同的图表读取相同的工作表 spiritLake。如何从不同的工作表(工作薄中不同的湖泊)读取数据?
- 设置代码以使用不同的数据源。从“Spreadsheet2”抽屉中，拖动另一个ReadSheet ：
- 使用电子表格上的工作表名称作为指导，在“ReadSheet”代码块中填写另一个工作表名称。记得检查你的拼写。(尤其是当你拼写“otsegoLake”的时候!)
- 用新的湖泊名称更新bottomLake标签：
- bottomChartData2D.ImportFromSpreadsheet代码块仍然从Sheet1中抓取数据。改为从spreadsheet2导入：
- 在这个例子中，新的图表应该比较两个湖泊的冰量数据。因此，删除yColumn中的“Temp”(如图所示)，并将列标题更改为“冰期”。
- 最后，检查你的代码！注意 spreadsheet1.GotSheetData 块运行时，它已经“got”了sheet1的信息。但是屏幕下方湖泊的spreadsheet2的信息呢?App如何知道spreadsheet2信息准备好了?从spreadsheet2的抽屉中，拖动另一个 GotSheetData代码块：
- 将屏幕底部的湖(使用spreadsheet2信息的那个)的所有块 -- 标签块和bottomChartData2D.ImportFromSpreadsheet块。移动到spreadsheet2的GotSheetData块中(你可以在下面的测试框中检查最终代码。)

测试你的代码
按下Show Data按钮

如果多次按下后仍未看到图表，请检查代码：

讨论：但这是一个合理的比较吗?

仔细观察这两个图表的y轴。

在每个例子中下，y轴是从哪里开始?
y轴的不同原点如何改变你对这些图表上数据的观察和比较?
修改轴可以使数据更容易可视化，但重要的是在做比较的时候要确保图表没有失真 -- 或不真实！

将y轴设置为0

使每个图表上的y轴相同。在组件设计面板中，单击topChart组件，勾选底部的属性 YfromZero 。
对bottomChart组件重复此操作。

在设备上再次测试代码。(如果Companion已失去连接，请重新连接。)

这将如何改变 Spirit Lake数据的外观?
这将如何改变屏幕上下两个湖泊的比较?

讨论：数据可视化如何帮助我们更好地理解数据?

看看屏幕上下这两张图表。

沿着图表的x轴选择某个年份。该年两个湖的冰期有什么不同?
你认为什么因素可以解释两个湖泊在同一年份的差异？
将两个湖泊的数据图表放在一起比较有什么好处?
除了湖泊数据，在未来的App中，你对可视化和比较哪些类型的数据感兴趣?

（注：数据来源于Sharma, Sapna等人的研究。“冰盖减少，物候变化，以及北半球湖泊发生的更多极端事件。”地球物理学报：生物地球科学126.10 (2021):e2021JG006348。）
("Loss of ice cover, shifting phenology, and more extreme events in Northern Hemisphere lakes." Journal of Geophysical Research: Biogeosciences 126.10 (2021): e2021JG006348. )

Part 3额外挑战：同时展示两张图

有时，你可能希望在同一图表中同时显示两个图形，以便于比较。如何在组件设计中排列ChartData2D组件以使它们显示在相同的空间中?