☆ 佘友軍
(海安縣實(shí)驗(yàn)小學(xué),江蘇海安 226600)
數(shù)學(xué)課件中動(dòng)態(tài)統(tǒng)計(jì)圖的使用
☆ 佘友軍
(海安縣實(shí)驗(yàn)小學(xué),江蘇海安 226600)
通過在數(shù)學(xué)課件中對(duì)動(dòng)態(tài)統(tǒng)計(jì)圖的實(shí)例介紹與分析,從而解決在實(shí)踐教學(xué)過程中教學(xué)困難,豐富教學(xué)內(nèi)容的呈現(xiàn)方式,調(diào)動(dòng)學(xué)生學(xué)習(xí)興趣。
數(shù)學(xué)課件;動(dòng)態(tài)統(tǒng)計(jì)圖;編程語句
在數(shù)學(xué)教學(xué)中,我們常常需要使用到各種統(tǒng)計(jì)圖,包括條形統(tǒng)計(jì)圖、折線統(tǒng)計(jì)圖和扇形統(tǒng)計(jì)圖。不過常常會(huì)遇到這樣的問題:統(tǒng)計(jì)圖是事先制作好的,無法根據(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)畫的方式呈現(xiàn),比如條形從零開始,逐漸生長(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ù)庫中讀取數(shù)據(jù),從而生成統(tǒng)計(jì)圖,因此,也適用于呈現(xiàn)實(shí)時(shí)投票結(jié)果上。
使用FusionCharts即可以實(shí)現(xiàn)上面的效果。FusionCharts是一個(gè)Flash的圖表組件,它可以用來制作數(shù)據(jù)動(dòng)畫圖表,動(dòng)畫效果非常好(如圖1)。由FusionCharts創(chuàng)建的圖表外觀流暢,交互方式有趣。另外,還有一些圖表可提供獨(dú)一無二的用戶體驗(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)行介紹。
下面我們來介紹一下FusionCharts文件夾中的子文件夾。Charts里存放了各種類型的統(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ì)圖”專門存放我們的統(tǒng)計(jì)圖文件,拷貝Fusion Charts所在目錄Charts子文件夾下的Column2D.swf文件到“我的統(tǒng)計(jì)圖”文件夾。這是一種二維風(fēng)格的條形統(tǒng)計(jì)圖,如果此時(shí)雙擊這個(gè)文件,不會(huì)看到任何圖形,因?yàn)槲覀冞€沒有給定數(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)效果為圓角類型(如圖1),這種類型更加美觀,此功能僅能在3.2以上版本中使用,最后還分別設(shè)置了字體大小,baseFontSize是統(tǒng)計(jì)圖中條形上的數(shù)據(jù)的字體大小,outCnvBaseFontSize是外圍區(qū)域字體的大小,如果你愿意,還可以設(shè)置陰影、邊框、字體等屬性。在<chart>元素中還有很多的<set>元素,這些元素是用來設(shè)置數(shù)據(jù)的名稱和數(shù)據(jù)值的。
這時(shí)再雙擊Column2D.swf文件,就能夠看到動(dòng)態(tài)的統(tǒng)計(jì)圖呈現(xiàn)出來了。如果我們想調(diào)整統(tǒng)計(jì)圖的類型,比如:將原先的條形統(tǒng)計(jì)圖改成折線統(tǒng)計(jì)圖,只需要從Charts文件夾中復(fù)制Line.swf到“我的統(tǒng)計(jì)圖”文件夾中。
如果要將統(tǒng)計(jì)圖完美地整合在自己的課件中怎么辦呢?下面我們開始將動(dòng)態(tài)統(tǒng)計(jì)圖整合在自己的flash課件中,首先,要確保使用的是FusionCharts v3以上的商業(yè)版本。Flash的版本要在8.0以上,使用的腳本是Ac?tionScript 2.0。
前面我們提到過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ù)庫中,都可以輕松地轉(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”。在我們開始編寫腳本之前,需要拷貝一些組件。將SourceCode文件夾下的com文件夾,拷貝到fla文件所在的目錄下。這樣在“動(dòng)態(tài)統(tǒng)計(jì)圖.fla”文件所在的位置下,還有一個(gè)com文件夾。com文件夾中包含了FusionCharts的一些類文件,這些文件用于生成統(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ì)圖的類文件,接著輸入下面一行腳本:
import com.fusioncharts.core.charts.Pie2DChart;
下面我們著手創(chuàng)建XML數(shù)據(jù),通過字符串的連接功能,將所有的xml語句存放在一個(gè)變量strXML中。這里我們直接給出了統(tǒng)計(jì)圖的各項(xiàng)數(shù)據(jù),在實(shí)際應(yīng)用中,數(shù)據(jù)可以是來自于數(shù)據(jù)庫。接著輸入下面的腳本:
下面開始創(chuàng)建統(tǒng)計(jì)圖了。首先,我們需要新建一個(gè)空的影片剪輯“chartContainerMC”,然后,將統(tǒng)計(jì)圖加到這個(gè)影片剪輯上去。
第二行語句用于創(chuàng)建一個(gè)450x325像素大小的二維扇形統(tǒng)計(jì)圖。
myFirstChart.setXMLData(xmlData);
這行語句用于設(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è)文本信息,顯示該分類項(xiàng)的標(biāo)題和百分比,如果用鼠標(biāo)點(diǎn)擊某個(gè)數(shù)據(jù)塊,該扇形塊會(huì)以動(dòng)畫的方式分離出來,效果非常好(如圖2)。
圖2
現(xiàn)在,我們開始制作一個(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)題文字,打開組件面板,加入兩個(gè)Textinput文本輸入框,分別取名為“txtLand”和“txt?Sea”,加入一個(gè)Button組件,取名為“btnDraw”,在第三幀處創(chuàng)建一個(gè)空白關(guān)鍵幀,加入一個(gè)按鈕組件“btnBack”,下面開始編寫腳本了。
在“腳本”圖層的第1幀輸入下面的腳本:
上面的腳本與前面的介紹基本類似,不再介紹。在第2幀處插入一個(gè)空白關(guān)鍵幀,輸入腳本:
這兩行腳本用于限制用戶的輸入只能是數(shù)字。下面我們開始為“繪圖”按鈕編寫腳本,我們希望按下“繪圖”按鈕后,收集用戶的數(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ì)圖外,還編寫了“返回”按鈕的功能,我們希望用戶按下“返回”按鈕后,能夠清除原先的統(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é)生通過一臺(tái)終端進(jìn)行作業(yè),作業(yè)情況的結(jié)果反饋到數(shù)據(jù)庫,然后調(diào)用數(shù)據(jù)庫中的信息生成動(dòng)態(tài)的統(tǒng)計(jì)圖,技術(shù)的引入必將為我們的課堂增色不少。
[編輯:陳 鉞]
G434
A
1671-7503(2014)05-0069-04