數學課件中動態統計圖的使用

☆ 佘友軍

（海安縣實驗小學，江蘇海安 226600）

數學課件中動態統計圖的使用

☆ 佘友軍

（海安縣實驗小學，江蘇海安 226600）

通過在數學課件中對動態統計圖的實例介紹與分析，從而解決在實踐教學過程中教學困難，豐富教學內容的呈現方式，調動學生學習興趣。

數學課件；動態統計圖；編程語句

在數學教學中，我們常常需要使用到各種統計圖，包括條形統計圖、折線統計圖和扇形統計圖。不過常常會遇到這樣的問題：統計圖是事先制作好的，無法根據課堂的生成隨時調整，另外，統計圖的呈現方式比較呆板、不美觀，不能夠充分調動學生的興趣。能否創建一種動態統計圖的呈現方式呢？這里的動態有兩層含義：一是呈現的方式是動態的，一個條形或者折線以動畫的方式呈現，比如條形從零開始，逐漸生長到了一定的值；二是統計圖的數據是動態的，可以在課件運行時直接輸入數據，然后根據這些數據實時生成統計圖，也可以從后臺數據庫中讀取數據，從而生成統計圖，因此，也適用于呈現實時投票結果上。

使用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，其中，給出條形統計圖的相關信息，包括標題、橫軸、縱軸和數據：

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

這時再雙擊Column2D.swf文件，就能夠看到動態的統計圖呈現出來了。如果我們想調整統計圖的類型，比如：將原先的條形統計圖改成折線統計圖，只需要從Charts文件夾中復制Line.swf到“我的統計圖”文件夾中。

二、Flash課件中的圖表

如果要將統計圖完美地整合在自己的課件中怎么辦呢？下面我們開始將動態統計圖整合在自己的flash課件中，首先，要確保使用的是FusionCharts v3以上的商業版本。Flash的版本要在8.0以上，使用的腳本是Ac?tionScript 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”用于存放腳本。在第一幀中輸入下面的腳本：

這兩個文件中包含了創建統計圖的一系列預定義的函數。要創建統計圖，我們還需要對應的統計圖的類文件，接著輸入下面一行腳本：

import com.fusioncharts.core.charts.Pie2DChart;

下面我們著手創建XML數據，通過字符串的連接功能，將所有的xml語句存放在一個變量strXML中。這里我們直接給出了統計圖的各項數據，在實際應用中，數據可以是來自于數據庫。接著輸入下面的腳本：

下面開始創建統計圖了。首先，我們需要新建一個空的影片剪輯“chartContainerMC”，然后，將統計圖加到這個影片剪輯上去。

第二行語句用于創建一個450x325像素大小的二維扇形統計圖。

myFirstChart.setXMLData(xmlData);

這行語句用于設置統計圖的數據源。

myFirstChart.render();

繪制統計圖

stop();

測試該文件，效果如圖2所示。這個統計圖還有兩個小功能，當鼠標移動到某一數據塊上面的時候，會顯示一個文本信息，顯示該分類項的標題和百分比，如果用鼠標點擊某個數據塊，該扇形塊會以動畫的方式分離出來，效果非常好（如圖2）。

圖2

三、根據輸入的結果隨時調整統計圖

現在，我們開始制作一個高級一點的實例，可以在課件運行的時候輸入數據，然后根據實時數據生成三維扇形統計圖，實現數據的動態化。

首先，新建一個actionscript 2.0腳本的文件，分別新建“用戶界面”圖層、“腳本”圖層和“標簽”圖層。在“標簽”圖層中，第1幀取名“初始化”，第二幀取名“填表”，用于接受用戶數據，第三幀取名“繪圖”，用于呈現統計圖（如圖3）。

圖3

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

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

上面的腳本與前面的介紹基本類似，不再介紹。在第2幀處插入一個空白關鍵幀，輸入腳本：

這兩行腳本用于限制用戶的輸入只能是數字。下面我們開始為“繪圖”按鈕編寫腳本，我們希望按下“繪圖”按鈕后，收集用戶的數據，然后生成XML數據，并將該數據傳給統計圖：

下面可以繪制統計圖了，第3幀處插入一個空白關鍵幀，輸入腳本：

btnBack.addEventListener("click",btnListener);

stop();

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

這樣我們就得到了一個動態的統計圖，可以隨時輸入數據，根據實時的數據繪制統計圖，讓我們的數學課堂更加生動。甚至我們還可以更進一步，打造一個動態反饋系統。每個學生通過一臺終端進行作業，作業情況的結果反饋到數據庫，然后調用數據庫中的信息生成動態的統計圖，技術的引入必將為我們的課堂增色不少。

[編輯：陳 鉞]

G434

A

1671-7503(2014)05-0069-04