szjuliet 发表于 2023-9-16 22:33:19

【App Inventor数据可视化】使用电子表格和图表2:通过比较...

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

【App Inventor数据可视化】使用电子表格和图表Part 2:通过比较数据集加深理解


[*]在同一个app屏幕上编码两个图表以比较数据
[*]编码图表,针对同一湖泊显示不同类型的数据

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

## Part 2:通过比较数据集加深理解

在Janelle编写App时,她对Spirit Lake的冰的变化有一种预感,但她想了解更多。

Janelle 编写了第二张图表来显示湖周围空气温度的变化。她想看看冰期和气温之间是否存在联系。

### 1. 为**Temperature**添加第二个图表

* 在组件设计中,拖拽一个Chart组件到你的app中:
![](https://markdown.liuchengtu.com/work/uploads/upload_9928639b23c8d654e4ccf0c20ed446cb.png)

    * 将Chart组件重命名为“bottomChart”,方便在编写程序时快速找到组件
![](https://markdown.liuchengtu.com/work/uploads/upload_0fc50b7d4ef74a27e6e1e09c7c194c03.png)

    * 确保让你的app用户知道新图表中显示的数据。在属性窗口中,填写 **描述Description** 为“Temperature”

    * 将图表的高度和宽度设置为“Fill Parent充满”,使图表填满屏幕
![](https://markdown.liuchengtu.com/work/uploads/upload_9cacaeab447d37e35971a053a84a8a8b.png)

* 将ChartData2D组件拖到bottomChart中以显示数据
![](https://markdown.liuchengtu.com/work/uploads/upload_1600caa857d8093e2044bf0d47c76f23.png)

    * 重命名Chart组件为“bottomChartData2D”,以便在编写程序时快速找到组件

    * 确保让你的app用户知道新图表中显示的数据。在属性窗口中,将标签填充为“Temperature (C)”,并将线条的颜色更改为蓝色以外的任何颜色(可以是红色!)
![](https://markdown.liuchengtu.com/work/uploads/upload_f28527a31d68a79c77c1c428dbf77baf.png)

* 在逻辑设计面板中,在上下两个图表之间放置标签,使用户可以分辨哪个湖对应的是哪个图表:
![](https://markdown.liuchengtu.com/work/uploads/upload_a56f38f7656b6bdee1282c4d90220b30.png)

    * 将标签组件重命名为“bottomLakeLabel”,方便程序编写

    * 在标签属性中,删除标签文本(“text for Label1”)

### 2. 对温度图表进行编码

* 为**bottomLakeLabel**添加一个代码块。设置其Text属性为:“Spirit Lake Temperature”
![](https://markdown.liuchengtu.com/work/uploads/upload_63ab7c5a5ebdea5ef4e40b577f9a19a4.png)

* 在Blocks逻辑设计面板中,从 **bottomchartdata2d** 抽屉中拖动另一个 **ImportFromSpreadsheet** 块到 **GotSheetData** 块中(类似Part 1第5步中对topChart所做的那样)。
![](https://markdown.liuchengtu.com/work/uploads/upload_dfb92d93b838e2d214868c0b64e733d7.png)

* 像上面的步骤5一样填写块的参数——有一点不同:**你将选择哪一列作为y轴?**(你可以在下面的测试框中检查你的代码。)
![](https://markdown.liuchengtu.com/work/uploads/upload_9c98ca0f72294e073857c297215f10c4.png)

| 测试你的代码 |
| -------- |
| 像Part 1一样按**Show Data**按钮   |
| ![](https://markdown.liuchengtu.com/work/uploads/upload_4b8aecd0095570a87ba7239dcd7129e9.png)      |
|如果多次按下后仍未看到图表,请检查代码:   |
|   ![](https://markdown.liuchengtu.com/work/uploads/upload_97bd412dd6e9a1cc964f076373c862a5.png)
   |

**讨论:从温度图表中你能看出什么**

看看图表中从1955年到2007年温度值的变化规律。

    从左到右看整个温度表,随着时间的推移,这些数值看上去是在上升还是在下降?
    如果你看到温度的趋势,解释这个趋势意味着什么。
    沿着图表的x轴选择某个年份。该年的冬季平均气温和冰期之间似乎有关联?
    试着将你的解释用不熟悉这个话题的人都能理解的方式表达出来。

    (注:数据来源于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. )
   
    温度数据是该地区12月、1月和2月的平均气温。来源:美国国家海洋和大气管理局)。

**引入数学模型**

Janelle 正在寻找一种更清晰地显示湖水结冰变化趋势的方法。她意识到一种方法是添加一个数学模型来创建一条称为“最佳拟合线”的线。Janelle的结果显示在这里。
![](https://markdown.liuchengtu.com/work/uploads/upload_b58fa63ed8f66024b7da3d9bb7e35899.png)

本例中,*模型*是app屏幕上简单准确地表示数据的那条黑色的线。它是将所有数字放入一个称为“最佳拟合线”或“最小二乘回归线”的公式中的结果。(本指南将在第4部分中进一步描述模型并共享代码。)

思考以下问题:

* 该模型如何帮助你更好地理解数据?

* 模型能帮助预测未来可能发生的事情吗?如何预测?

页: [1]
查看完整版本: 【App Inventor数据可视化】使用电子表格和图表2:通过比较...