App Inventor 进阶：动态创建多彩图表揭秘

折线图、面积图、垂直柱状图、水平柱状图、饼状图、雷达图、气泡图、散点图，一个都不能少！完整支持使用代码块动态创建图表、数据集和趋势线（拟合曲线），除了饼状图和雷达图，其他图表都支持显示趋势线。相比 MIT 版的图表，提供更多的图表类型和使用自由度。

访问 WxBit 图形化编程系统，新建一个项目，切换到逻辑视图，动态创建图表并在图表中添加数据集，然后为数据集添加数据，代码块如图1所示：

图1 动态创建数据图表

连接调试助手预览，即可看到效果如图2所示：

图2 调试助手预览图表

默认为折线图，可以通过设置图表类型块动态修改，对应的数值为 0 - 7，如图3所示，视觉效果参考图4和图5。

图3 图表的类型

图4 其他图表类型

图5 其他图表类型

“折线图”和“面积图”区别，是面积图会填充下方的区域。设置数据集的“线型”改变连线类型，支持直线、台阶、二次贝塞尔和三次贝塞尔。二次贝塞尔曲线在2个点之间使用平滑曲线连接，因此每个点都是曲线的局部最大值/最小值点，而三次贝塞尔曲线则不是，对比如图6所示。

图6 二次贝塞尔曲线与三次贝塞尔曲线

不同类型的数据图表，其属性及数据集能够设置的属性都有些许差别。如饼状图可以设置半径比例，散点图中数据集可以设置“点形”等。

如果图1的动态创建代码块看不懂，请看下面的静态使用方法。

在设计视图中将“数据图表”拖进屏幕，然后将“图表数据集”拖到数据图表中，设置数据如图7所示具有相同效果。

图7 静态使用数据图表

将“趋势线”拖到数据图表中，选择图表数据集，在回归模型中选择一种方程对数据进行拟合绘画，如图8所示。

图8 设置趋势线

关于图表的更多特性，请连接调试助手探索吧。

进阶小技巧：

1、图1所示的代码块中，为什么将宽度和高度设置为 -2 呢？正如图3所示的图表类型，在设计视图中支持下拉框改变的属性，后面的数字就是在代码块中设置组件属性能够使用的数值。-2 在宽高属性中，表示充满屏幕或布局。

2、在图1中，我们把动态创建的图表放到了局部变量中，那么如何能够在局部变量的作用范围之外访问呢？这里有个小技巧，可以通过“任意组件”分类的组件列表块，获取屏幕内全部的该类型组件，使用方法如图9所示。

图9 获取某种类型的组件