数学课件中动态统计图的使用

【www.zgpaoc.com--四年级作文】

摘 要：通过在数学课件中对动态统计图的实例介绍与分析，从而解决在实践教学过程中教学困难，丰富教学内容的呈现方式，调动学生学习兴趣。
关键词：数学课件；动态统计图；编程语句
中图分类号：G434 文献标识码：A 文章编号：1671-7503（2014）05-0069-04
在数学教学中，我们常常需要使用到各种统计图，包括条形统计图、折线统计图和扇形统计图。不过常常会遇到这样的问题：统计图是事先制作好的，无法根据课堂的生成随时调整，另外，统计图的呈现方式比较呆板、不美观，不能够充分调动学生的兴趣。能否创建一种动态统计图的呈现方式呢？这里的动态有两层含义：一是呈现的方式是动态的，一个条形或者折线以动画的方式呈现，比如条形从零开始，逐渐生长到了一定的值；二是统计图的数据是动态的，可以在课件运行时直接输入数据，然后根据这些数据实时生成统计图，也可以从后台数据库中读取数据，从而生成统计图，因此，也适用于呈现实时投票结果上。
使用FusionCharts即可以实现上面的效果。FusionCharts是一个Flash的图表组件，它可以用来制作数据动画图表，动画效果非常好（如图1）。由FusionCharts创建的图表外观流畅，交互方式有趣。另外，还有一些图表可提供独一无二的用户体验，例如：该软件的3D图表允许用户在客户端对图表进行动态旋转，可以以任意视角对统计图中的数据进行放大观看，并具备点击功能。
图1
下面将结合实例对动态统计图的部分特征及操作流程进行介绍。
一、无需编程
下面我们来介绍一下FusionCharts文件夹中的子文件夹。Charts里存放了各种类型的统计图swf文件，如果我们需要在网络上使用统计图，那么必须要使用这里的对应文件。每种统计图都有一个以swf为后缀的文件。例如：当需要创建立体风格的条形统计图时，需要Column3D.swf文件，如果要创建三维风格的扇形统计图，就需要用到Pie3D.swf文件。Code文件夹中存放了各种使用实例。SourceCode文件夹中存放的是源文件，当需要在Flash作品中插入统计图，即从该文件中提取文件。Tools文件夹中存放了生成xml文件的工具。
新建一个文件夹“我的统计图”专门存放我们的统计图文件，拷贝Fusion Charts所在目录Charts子文件夹下的Column2D.swf文件到“我的统计图”文件夹。这是一种二维风格的条形统计图，如果此时双击这个文件，不会看到任何图形，因为我们还没有给定数据。下面，在“我的统计图”文件夹中新建一个数据文件Data.xml，其中，给出条形统计图的相关信息，包括标题、横轴、纵轴和数据：






上面的这行代码中，是root元素，这里设置了统计图的标题（caption），副标题（subcaption），x轴名称（xAxisName），y轴名称（yAxisName）。其中，useRoundEdges="1"用于设置条形的呈现效果为圆角类型（如图1），这种类型更加美观，此功能仅能在3.2以上版本中使用，最后还分别设置了字体大小，baseFontSize是统计图中条形上的数据的字体大小，outCnvBaseFontSize是外围区域字体的大小，如果你愿意，还可以设置阴影、边框、字体等属性。在元素中还有很多的元素，这些元素是用来设置数据的名称和数据值的。
这时再双击Column2D.swf文件，就能够看到动态的统计图呈现出来了。如果我们想调整统计图的类型，比如：将原先的条形统计图改成折线统计图，只需要从Charts文件夹中复制Line.swf到“我的统计图”文件夹中。
二、Flash课件中的图表
如果要将统计图完美地整合在自己的课件中怎么办呢？下面我们开始将动态统计图整合在自己的flash课件中，首先，要确保使用的是FusionCharts v3以上的商业版本。Flash的版本要在8.0以上，使用的脚本是ActionScript 2.0。
前面我们提到过FusionCharts需要从xml文件中获取数据信息，因此，即便是在Flash中我们也需要提供xml格式的数据。在Flash中我们可以使用字符串的连接轻松创建xml数据，并不需要创建一个物理的XML文件，可以在文件运行的时候动态创建数据并传输，因此，即便是我们的数据存放在数组中、远程数据库中，都可以轻松地转换成XML数据，并且实时传输给FusionCharts。
首先，新建一个使用ActionScript 2.0脚本的Flash文件，设置舞台的大小为500x350像素，背景色为白色，将其保存为“动态统计图.fla”。在我们开始编写脚本之前，需要拷贝一些组件。将SourceCode文件夹下的com文件夹，拷贝到fla文件所在的目录下。这样在“动态统计图.fla”文件所在的位置下，还有一个com文件夹。com文件夹中包含了FusionCharts的一些类文件，这些文件用于生成统计图。 现在需要的文件已经各就各位了，该回到Flash中去了。将Flash中的当前层改名为“背景”，在这里可以自由设置课件的背景。新建一个图形“Actions”用于存放脚本。在第一帧中输入下面的脚本：
#include "com/fusioncharts/includes/LoadingFunctions.as"
#include "com/fusioncharts/includes/AppMessages.as"
这两个文件中包含了创建统计图的一系列预定义的函数。要创建统计图，我们还需要对应的统计图的类文件，接着输入下面一行脚本：
import com.fusioncharts.core.charts. Pie2DChart；
下面我们着手创建XML数据，通过字符串的连接功能，将所有的xml语句存放在一个变量strXML中。这里我们直接给出了统计图的各项数据，在实际应用中，数据可以是来自于数据库。接着输入下面的脚本：
var strXML：String = ""；
strXML = strXML + ""；
strXML = strXML + ""；
strXML = strXML + ""；
strXML = strXML + ""；
strXML = strXML + ""；
strXML = strXML + ""；
var xmlData：XML = new XML（strXML）；
下面开始创建统计图了。首先，我们需要新建一个空的影片剪辑“chartContainerMC”，然后，将统计图加到这个影片剪辑上去。
var chartContainerMC：MovieClip = this.createEmptyMovieClip（"ChartHolder"，1）；
var myFirstChart：Pie2DChart = new Pie2DChart（chartContainerMC， 1， 450， 325， 20， 15， false， "EN"， "noScale"）；
第二行语句用于创建一个450x325像素大小的二维扇形统计图。
myFirstChart.setXMLData（xmlData）；
这行语句用于设置统计图的数据源。
myFirstChart.render（）；
绘制统计图
stop（）；
测试该文件，效果如图2所示。这个统计图还有两个小功能，当鼠标移动到某一数据块上面的时候，会显示一个文本信息，显示该分类项的标题和百分比，如果用鼠标点击某个数据块，该扇形块会以动画的方式分离出来，效果非常好（如图2）。
图2
三、根据输入的结果随时调整统计图
现在，我们开始制作一个高级一点的实例，可以在课件运行的时候输入数据，然后根据实时数据生成三维扇形统计图，实现数据的动态化。
首先，新建一个actionscript 2.0脚本的文件，分别新建“用户界面”图层、“脚本”图层和“标签”图层。在“标签”图层中，第1帧取名“初始化”，第二帧取名“填表”，用于接受用户数据，第三帧取名“绘图”，用于呈现统计图（如图3）。
图3
“用户界面”层第1帧用于显示文本框，等待用户的输入，如图3所示输入标题文字，打开组件面板，加入两个Textinput文本输入框，分别取名为“txtLand”和“txtSea”，加入一个Button组件，取名为“btnDraw”，在第三帧处创建一个空白关键帧，加入一个按钮组件“btnBack”，下面开始编写脚本了。
在“脚本”图层的第1帧输入下面的脚本：
#include "com/fusioncharts/includes/LoadingFunctions.as"
#include "com/fusioncharts/includes/AppMessages.as"
import com.fusioncharts.core.charts.Pie3DChart；
var chartContainerMC：MovieClip = this.createEmptyMovieClip（"ChartHolder"， 1）；
var mineChart：Pie3DChart = new Pie3DChart（chartContainerMC， 1， 450， 300， 20， 15， false， "EN"， "noScale"）；
gotoAndStop（"填表"）；
上面的脚本与前面的介绍基本类似，不再介绍。在第2帧处插入一个空白关键帧，输入脚本：
txtLand.restrict = "0-9"；
txtSea.restrict = "0-9"；
这两行脚本用于限制用户的输入只能是数字。下面我们开始为“绘图”按钮编写脚本，我们希望按下“绘图”按钮后，收集用户的数据，然后生成XML数据，并将该数据传给统计图： var btnListener：Object = new Object（）；
btnListener.click = function（） {
var strXML：String=""；
strXML = strXML + ""；
strXML = strXML + ""；
strXML = strXML + ""；
mineChart.setXMLData（new XML（strXML））；
gotoAndStop（"绘图"）；
}
btnDraw.addEventListener（"click"， btnListener）；
stop（）；
下面可以绘制统计图了，第3帧处插入一个空白关键帧，输入脚本：
chartContainerMC._visible = true；
mineChart.render（）；
var btnListener：Object = new Object（）；
btnListener.click = function（）{
mineChart.remove（）；
mineChart.reInit（）；
chartContainerMC._visible = false；
gotoAndStop（"填表"）；
}
btnBack.addEventListener（"click"，btnListener）；
stop（）；
上面的脚本除了绘制统计图外，还编写了“返回”按钮的功能，我们希望用户按下“返回”按钮后，能够清除原先的统计图，返回到输入框，继续接受用户的数据。
这样我们就得到了一个动态的统计图，可以随时输入数据，根据实时的数据绘制统计图，让我们的数学课堂更加生动。甚至我们还可以更进一步，打造一个动态反馈系统。每个学生通过一台终端进行作业，作业情况的结果反馈到数据库，然后调用数据库中的信息生成动态的统计图，技术的引入必将为我们的课堂增色不少。
[编辑：陈 钺]

手机客户端打开本文

【摘要】：通过在数学课件中对动态统计图的实例介绍与分析,从而解决在实践教学过程中教学困难,丰富教学内容的呈现方式,调动学生学习兴趣。

在数学教学中,我们常常需要使用到各种统计图,包括条形统计图、折线统计图和扇形统计图。不过常常会遇到这样的问题:统计图是事先制作好的,无法根据课堂的生成随时调整,另外,统计图的呈现方式比较呆板、不美观,不能够充分调动学生的兴趣。能否创建一种动态统计图的呈现方式呢?

(？ 欢迎：、、)

支持CAJ、PDF文件格式，仅支持PDF格式

本文来源：http://www.zgpaoc.com/xiaoxuezuowen/61681.html