文檔首頁>>Flash圖表控件 FusionCharts 使用教程>>FusionCharts使用教程:利用HTML表單數(shù)據(jù)渲染圖表
FusionCharts使用教程:利用HTML表單數(shù)據(jù)渲染圖表
本文中,我們將利用HTML表單數(shù)據(jù)渲染FusionCharts圖表。接下來,我們將構(gòu)建一個簡單的餐廳銷售的例子,由專人輸入餐廳每天所出售的食物。我們將獲得這些餐廳銷售數(shù)據(jù),并繪制圖表。本文所涉及的示例代碼可以在FusionCharts試用版中獲取。
示例效果如下:
用戶在輸入框中輸入食物項目的相關(guān)值,然后點擊 "Chart it!"。該按鈕將生成輸入框中所輸入數(shù)據(jù)的對應(yīng)圖表。
部分示例代碼:
接下來,我們一步步分析一下上述代碼中涉及的步驟:
1、列出JavaScript類文件FusionCharts.js
2、創(chuàng)建5個輸入框
3、為每個輸入框設(shè)置id,
4、當(dāng)點擊 chartIt()時,在文本輸入框下調(diào)用JavaScript函數(shù)
5、該函數(shù)會首先檢索來自輸入框中的所有值。
6、為圖表創(chuàng)建一個帶有所有檢索值的XML字符串。
7、渲染圖表,并將XML字符串傳遞給圖表