少儿编程Scratch第21讲:数据可视化-柱状图(第1版)

网友投稿 2019-01-26 11:40

期末考试一直在备战备荒,复习迎考,没有做Scratch的项目。虽然没能抱回什么奖状,但总体来说本学期还是有不少进步的。只要持续的努力,我相信下学期能取得比这一学期要好的成绩。

终于放假了,之前学的Scratch也忘得差不多了。今天上午花了两个小时,进度很慢,做了一个简单的图表。这是第一个版本,还没使用循环,后续再变成循环吧。

背景:二年级下学期数学第一单元是数据收集与统计。课本的第一个例题是学校要采购校服,进行颜色偏好意向统计,红色10人,黄色12人,蓝色8人,白色15人。然后会问喜欢什么颜色的最多,喜欢什么颜色的最少,采购什么颜色的校服比较合适。基本上还是以表格为主的展示方式。我想可以通过柱状图等图形展示出来,那样更加直接。

适用对象:一二年级具有初级Scratch的学生。

目标:给出一组数据,做出柱状图图表,柱子的高矮代表数值的大小,这是最基本的一种数据图形展示方式了。

共享位置:https://scratch.mit.edu/projects/276761007/ 

Scratch 3.0,可以直接在手机上打开这个地址。

效果图:显示了三个变量,一个列表,小猫咪画出了柱状图,还有一根X轴的轴线。

https://cdn.china-scratch.com/timg/190128/1140325N7-0.jpg

角色:只有一个,默认的小猫,但大小设置为小一些。

手稿:制作前,先讲清楚目标和原理。

  1)高度:高度是变化的,需要从列表中取出来

  2)宽度:柱状图的宽度,固定的,如果宽度是20,那么就是画20条线,这20条线连接在一起,就成一个柱子。

  3)间隔:柱子之间有固定的宽度。

https://cdn.china-scratch.com/timg/190128/114033HD-1.jpg

https://cdn.china-scratch.com/timg/190128/1140336205-2.jpg

因此设置三个变量,这样后续方便调整。

https://cdn.china-scratch.com/timg/190128/1140331G9-3.jpg

数据:使用列表,直接将四个数据填写在列表中。

https://cdn.china-scratch.com/timg/190128/114034HQ-4.jpg

数据列表,数值填充。

制作步骤:

一、初始化

初始化高度、宽度、间隔,同时填充列表数据。另外,需要设置小猫的起点位置。

二、画X轴坐标线

1)间隔为20;

2)全部擦除;否则下次运行时,还存在这些图画。

3)移动起点位置;

4)落笔,就是下笔,如果有运动,就会画线。

5)直接将X坐标增加到330,就是画了一根横线了。如果需要高度横线,可以这样画出来。

6)到最右边以后,画图结束,就需要抬笔。

7) 回到原点,准备画柱状图。

https://cdn.china-scratch.com/timg/190128/1140341C6-5.jpg

三、画第一根柱子

1)宽度50;

2)高度:从列表中取第一项;

3)因为里面的高度数据太小,所以需要放大,这里x16,放大16倍。

https://cdn.china-scratch.com/timg/190128/1140342C0-6.jpg

4)重复执行宽度次。每个柱子都是一条一条线画出来的。这个概念要理解,画笔默认宽度是1.

5)画每根线都是从底部-140开始,然后往上走。

6)落笔;将Y增加高度值;抬笔。就画了一根线了。

7)x坐标加一,继续画,即画(宽度)次数。

这样一根柱状图就画出来了。 然后我们可以使用循环。但为了贪图方便,小孩选择了,复制四份代码。那就先使用四份代码,这样代码会很长,重复的代码会多。如果要修改里面的某行代码,那很可能要修改四个地方。这些代码是可以服用的。借此,后面转成循环方式,让他体会一下区别。如果要画20根柱状图,那就复制20份吗?也许,我应该让他复制20分代码,然后一个一个核对顺序,然后让他体会一下重用代码的好处。

https://cdn.china-scratch.com/timg/190128/1140341912-7.jpg

当中还出现某两根线之间没有间隔,贴在一起的情况,那怎么解决呢,为什么呢。

https://cdn.china-scratch.com/timg/190128/1140345404-8.jpg

我们的y坐标线其实是后来加上去的。画完坐标,如果不回位,柱状图就在右边挨着画了。

https://cdn.china-scratch.com/timg/190128/1140352052-9.jpg

改进:组成循环,Block。

--end--

声明:本文章由网友投稿作为教育分享用途,如有侵权原作者可通过邮件及时和我们联系删除:freemanzk@qq.com