數(shù)學(xué)課件中動(dòng)態(tài)統(tǒng)計(jì)圖的使用

☆ 佘友軍

（海安縣實(shí)驗(yàn)小學(xué)，江蘇海安 226600）

數(shù)學(xué)課件中動(dòng)態(tài)統(tǒng)計(jì)圖的使用

☆ 佘友軍

（海安縣實(shí)驗(yàn)小學(xué)，江蘇海安 226600）

通過(guò)在數(shù)學(xué)課件中對(duì)動(dòng)態(tài)統(tǒng)計(jì)圖的實(shí)例介紹與分析，從而解決在實(shí)踐教學(xué)過(guò)程中教學(xué)困難，豐富教學(xué)內(nèi)容的呈現(xiàn)方式，調(diào)動(dòng)學(xué)生學(xué)習(xí)興趣。

數(shù)學(xué)課件；動(dòng)態(tài)統(tǒng)計(jì)圖；編程語(yǔ)句

在數(shù)學(xué)教學(xué)中，我們常常需要使用到各種統(tǒng)計(jì)圖，包括條形統(tǒng)計(jì)圖、折線統(tǒng)計(jì)圖和扇形統(tǒng)計(jì)圖。不過(guò)常常會(huì)遇到這樣的問(wèn)題：統(tǒng)計(jì)圖是事先制作好的，無(wú)法根據(jù)課堂的生成隨時(shí)調(diào)整，另外，統(tǒng)計(jì)圖的呈現(xiàn)方式比較呆板、不美觀，不能夠充分調(diào)動(dòng)學(xué)生的興趣。能否創(chuàng)建一種動(dòng)態(tài)統(tǒng)計(jì)圖的呈現(xiàn)方式呢？這里的動(dòng)態(tài)有兩層含義：一是呈現(xiàn)的方式是動(dòng)態(tài)的，一個(gè)條形或者折線以動(dòng)畫(huà)的方式呈現(xiàn)，比如條形從零開(kāi)始，逐漸生長(zhǎng)到了一定的值；二是統(tǒng)計(jì)圖的數(shù)據(jù)是動(dòng)態(tài)的，可以在課件運(yùn)行時(shí)直接輸入數(shù)據(jù)，然后根據(jù)這些數(shù)據(jù)實(shí)時(shí)生成統(tǒng)計(jì)圖，也可以從后臺(tái)數(shù)據(jù)庫(kù)中讀取數(shù)據(jù)，從而生成統(tǒng)計(jì)圖，因此，也適用于呈現(xiàn)實(shí)時(shí)投票結(jié)果上。

使用FusionCharts即可以實(shí)現(xiàn)上面的效果。FusionCharts是一個(gè)Flash的圖表組件，它可以用來(lái)制作數(shù)據(jù)動(dòng)畫(huà)圖表，動(dòng)畫(huà)效果非常好（如圖1）。由FusionCharts創(chuàng)建的圖表外觀流暢，交互方式有趣。另外，還有一些圖表可提供獨(dú)一無(wú)二的用戶體驗(yàn)，例如：該軟件的3D圖表允許用戶在客戶端對(duì)圖表進(jìn)行動(dòng)態(tài)旋轉(zhuǎn)，可以以任意視角對(duì)統(tǒng)計(jì)圖中的數(shù)據(jù)進(jìn)行放大觀看，并具備點(diǎn)擊功能。

圖1

下面將結(jié)合實(shí)例對(duì)動(dòng)態(tài)統(tǒng)計(jì)圖的部分特征及操作流程進(jìn)行介紹。

一、無(wú)需編程

下面我們來(lái)介紹一下FusionCharts文件夾中的子文件夾。Charts里存放了各種類(lèi)型的統(tǒng)計(jì)圖swf文件，如果我們需要在網(wǎng)絡(luò)上使用統(tǒng)計(jì)圖，那么必須要使用這里的對(duì)應(yīng)文件。每種統(tǒng)計(jì)圖都有一個(gè)以swf為后綴的文件。例如：當(dāng)需要?jiǎng)?chuàng)建立體風(fēng)格的條形統(tǒng)計(jì)圖時(shí)，需要Column3D.swf文件，如果要?jiǎng)?chuàng)建三維風(fēng)格的扇形統(tǒng)計(jì)圖，就需要用到Pie3D.swf文件。Code文件夾中存放了各種使用實(shí)例。SourceCode文件夾中存放的是源文件，當(dāng)需要在Flash作品中插入統(tǒng)計(jì)圖，即從該文件中提取文件。Tools文件夾中存放了生成xml文件的工具。

新建一個(gè)文件夾“我的統(tǒng)計(jì)圖”專門(mén)存放我們的統(tǒng)計(jì)圖文件，拷貝Fusion Charts所在目錄Charts子文件夾下的Column2D.swf文件到“我的統(tǒng)計(jì)圖”文件夾。這是一種二維風(fēng)格的條形統(tǒng)計(jì)圖，如果此時(shí)雙擊這個(gè)文件，不會(huì)看到任何圖形，因?yàn)槲覀冞€沒(méi)有給定數(shù)據(jù)。下面，在“我的統(tǒng)計(jì)圖”文件夾中新建一個(gè)數(shù)據(jù)文件Data.xml，其中，給出條形統(tǒng)計(jì)圖的相關(guān)信息，包括標(biāo)題、橫軸、縱軸和數(shù)據(jù)：

上面的這行代碼中，＜chart>是root元素，這里設(shè)置了統(tǒng)計(jì)圖的標(biāo)題（caption），副標(biāo)題（subcaption），x軸名稱（xAxisName），y軸名稱（yAxisName）。其中，useRound?Edges='1'用于設(shè)置條形的呈現(xiàn)效果為圓角類(lèi)型（如圖1），這種類(lèi)型更加美觀，此功能僅能在3.2以上版本中使用，最后還分別設(shè)置了字體大小，baseFontSize是統(tǒng)計(jì)圖中條形上的數(shù)據(jù)的字體大小，outCnvBaseFontSize是外圍區(qū)域字體的大小，如果你愿意，還可以設(shè)置陰影、邊框、字體等屬性。在＜chart>元素中還有很多的＜set>元素，這些元素是用來(lái)設(shè)置數(shù)據(jù)的名稱和數(shù)據(jù)值的。

這時(shí)再雙擊Column2D.swf文件，就能夠看到動(dòng)態(tài)的統(tǒng)計(jì)圖呈現(xiàn)出來(lái)了。如果我們想調(diào)整統(tǒng)計(jì)圖的類(lèi)型，比如：將原先的條形統(tǒng)計(jì)圖改成折線統(tǒng)計(jì)圖，只需要從Charts文件夾中復(fù)制Line.swf到“我的統(tǒng)計(jì)圖”文件夾中。

二、Flash課件中的圖表

如果要將統(tǒng)計(jì)圖完美地整合在自己的課件中怎么辦呢？下面我們開(kāi)始將動(dòng)態(tài)統(tǒng)計(jì)圖整合在自己的flash課件中，首先，要確保使用的是FusionCharts v3以上的商業(yè)版本。Flash的版本要在8.0以上，使用的腳本是Ac?tionScript 2.0。

前面我們提到過(guò)FusionCharts需要從xml文件中獲取數(shù)據(jù)信息，因此，即便是在Flash中我們也需要提供xml格式的數(shù)據(jù)。在Flash中我們可以使用字符串的連接輕松創(chuàng)建xml數(shù)據(jù)，并不需要?jiǎng)?chuàng)建一個(gè)物理的XML文件，可以在文件運(yùn)行的時(shí)候動(dòng)態(tài)創(chuàng)建數(shù)據(jù)并傳輸，因此，即便是我們的數(shù)據(jù)存放在數(shù)組中、遠(yuǎn)程數(shù)據(jù)庫(kù)中，都可以輕松地轉(zhuǎn)換成XML數(shù)據(jù)，并且實(shí)時(shí)傳輸給FusionCharts。

首先，新建一個(gè)使用ActionScript 2.0腳本的Flash文件，設(shè)置舞臺(tái)的大小為500x350像素，背景色為白色，將其保存為“動(dòng)態(tài)統(tǒng)計(jì)圖.fla”。在我們開(kāi)始編寫(xiě)腳本之前，需要拷貝一些組件。將SourceCode文件夾下的com文件夾，拷貝到fla文件所在的目錄下。這樣在“動(dòng)態(tài)統(tǒng)計(jì)圖.fla”文件所在的位置下，還有一個(gè)com文件夾。com文件夾中包含了FusionCharts的一些類(lèi)文件，這些文件用于生成統(tǒng)計(jì)圖。

現(xiàn)在需要的文件已經(jīng)各就各位了，該回到Flash中去了。將Flash中的當(dāng)前層改名為“背景”，在這里可以自由設(shè)置課件的背景。新建一個(gè)圖形“Actions”用于存放腳本。在第一幀中輸入下面的腳本：

這兩個(gè)文件中包含了創(chuàng)建統(tǒng)計(jì)圖的一系列預(yù)定義的函數(shù)。要?jiǎng)?chuàng)建統(tǒng)計(jì)圖，我們還需要對(duì)應(yīng)的統(tǒng)計(jì)圖的類(lèi)文件，接著輸入下面一行腳本：

import com.fusioncharts.core.charts.Pie2DChart;

下面我們著手創(chuàng)建XML數(shù)據(jù)，通過(guò)字符串的連接功能，將所有的xml語(yǔ)句存放在一個(gè)變量strXML中。這里我們直接給出了統(tǒng)計(jì)圖的各項(xiàng)數(shù)據(jù)，在實(shí)際應(yīng)用中，數(shù)據(jù)可以是來(lái)自于數(shù)據(jù)庫(kù)。接著輸入下面的腳本：

下面開(kāi)始創(chuàng)建統(tǒng)計(jì)圖了。首先，我們需要新建一個(gè)空的影片剪輯“chartContainerMC”，然后，將統(tǒng)計(jì)圖加到這個(gè)影片剪輯上去。

第二行語(yǔ)句用于創(chuàng)建一個(gè)450x325像素大小的二維扇形統(tǒng)計(jì)圖。

myFirstChart.setXMLData(xmlData);

這行語(yǔ)句用于設(shè)置統(tǒng)計(jì)圖的數(shù)據(jù)源。

myFirstChart.render();

繪制統(tǒng)計(jì)圖

stop();

測(cè)試該文件，效果如圖2所示。這個(gè)統(tǒng)計(jì)圖還有兩個(gè)小功能，當(dāng)鼠標(biāo)移動(dòng)到某一數(shù)據(jù)塊上面的時(shí)候，會(huì)顯示一個(gè)文本信息，顯示該分類(lèi)項(xiàng)的標(biāo)題和百分比，如果用鼠標(biāo)點(diǎn)擊某個(gè)數(shù)據(jù)塊，該扇形塊會(huì)以動(dòng)畫(huà)的方式分離出來(lái)，效果非常好（如圖2）。

圖2

三、根據(jù)輸入的結(jié)果隨時(shí)調(diào)整統(tǒng)計(jì)圖

現(xiàn)在，我們開(kāi)始制作一個(gè)高級(jí)一點(diǎn)的實(shí)例，可以在課件運(yùn)行的時(shí)候輸入數(shù)據(jù)，然后根據(jù)實(shí)時(shí)數(shù)據(jù)生成三維扇形統(tǒng)計(jì)圖，實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)化。

首先，新建一個(gè)actionscript 2.0腳本的文件，分別新建“用戶界面”圖層、“腳本”圖層和“標(biāo)簽”圖層。在“標(biāo)簽”圖層中，第1幀取名“初始化”，第二幀取名“填表”，用于接受用戶數(shù)據(jù)，第三幀取名“繪圖”，用于呈現(xiàn)統(tǒng)計(jì)圖（如圖3）。

圖3

“用戶界面”層第1幀用于顯示文本框，等待用戶的輸入，如圖3所示輸入標(biāo)題文字，打開(kāi)組件面板，加入兩個(gè)Textinput文本輸入框，分別取名為“txtLand”和“txt?Sea”，加入一個(gè)Button組件，取名為“btnDraw”，在第三幀處創(chuàng)建一個(gè)空白關(guān)鍵幀，加入一個(gè)按鈕組件“btnBack”，下面開(kāi)始編寫(xiě)腳本了。

在“腳本”圖層的第1幀輸入下面的腳本：

上面的腳本與前面的介紹基本類(lèi)似，不再介紹。在第2幀處插入一個(gè)空白關(guān)鍵幀，輸入腳本：

這兩行腳本用于限制用戶的輸入只能是數(shù)字。下面我們開(kāi)始為“繪圖”按鈕編寫(xiě)腳本，我們希望按下“繪圖”按鈕后，收集用戶的數(shù)據(jù)，然后生成XML數(shù)據(jù)，并將該數(shù)據(jù)傳給統(tǒng)計(jì)圖：

下面可以繪制統(tǒng)計(jì)圖了，第3幀處插入一個(gè)空白關(guān)鍵幀，輸入腳本：

btnBack.addEventListener("click",btnListener);

stop();

上面的腳本除了繪制統(tǒng)計(jì)圖外，還編寫(xiě)了“返回”按鈕的功能，我們希望用戶按下“返回”按鈕后，能夠清除原先的統(tǒng)計(jì)圖，返回到輸入框，繼續(xù)接受用戶的數(shù)據(jù)。

這樣我們就得到了一個(gè)動(dòng)態(tài)的統(tǒng)計(jì)圖，可以隨時(shí)輸入數(shù)據(jù)，根據(jù)實(shí)時(shí)的數(shù)據(jù)繪制統(tǒng)計(jì)圖，讓我們的數(shù)學(xué)課堂更加生動(dòng)。甚至我們還可以更進(jìn)一步，打造一個(gè)動(dòng)態(tài)反饋系統(tǒng)。每個(gè)學(xué)生通過(guò)一臺(tái)終端進(jìn)行作業(yè)，作業(yè)情況的結(jié)果反饋到數(shù)據(jù)庫(kù)，然后調(diào)用數(shù)據(jù)庫(kù)中的信息生成動(dòng)態(tài)的統(tǒng)計(jì)圖，技術(shù)的引入必將為我們的課堂增色不少。

[編輯：陳 鉞]

G434

A

1671-7503(2014)05-0069-04