在一個asp.net項目中要用到能繪制大數據量信息的圖表,並且是可交互的(放大、縮小、導出、打印、實時數據),能夠繪制多種圖形。
為此進行了多方調查預研工作,預研過微軟的MsChart圖表組件、基於jquery的FlortChart圖表、Silverlight的Visifire圖表組件、基於js和flash的FusionCharts圖表、Ext4.0框架中的圖表、純js的Highstock和純js的Highcharts。
下面給出各個圖表的預研結果,以供參考。
| MsChart |
|
| MsChart是一個微軟自帶圖表,圖表支持事件、實時數據、導出圖片、打印圖表等功能,但是不支持放大縮小功能。所表現的形式是圖片 |
|
| 數據量 |
6M |
| 數據格式 |
支持DataTable、Object[]等多種數據形式 |
| 交互方式 |
通過.cs后台代碼進行數據填充 |
| 數據源時間 |
16s |
| 響應時間 |
毫秒 |
| 優點 |
對大數據量支持效果比較好,響應時間快,不需要用戶下載安裝任何插件 |
| 缺點 |
不支持放大縮小功能,表現形式是圖片,不滿足系統需求 |
| Highcharts |
|
| Highcharts是一款純js的圖表,圖表支持事件、實時數據、放大縮小、導出圖片、打印圖表功能 |
|
| 數據量 |
6M |
| 數據格式 |
Json輕數據格式 |
| 交互方式 |
Highcharts通過ajax調用后台方法獲取數據,然后顯示; |
| 數據源時間 |
16.97s |
| 響應時間 |
8s |
| 優點 |
易於維護和定制、展現美觀、滿足系統需求,不需要用戶下載安裝任何插件 |
| 缺點 |
加載速度慢,容易造成瀏覽器卡死 |
| FlortChart |
|
| FlortChart基於JQuery的圖形組件,支持事件、放大縮小
|
|
| 數據量 |
6M |
| 數據格式 |
Xml,json |
| 交互方式 |
FlortChart通過ajax調用后台方法獲取數據,然后顯示 |
| 數據源時間 |
16s |
| 響應時間 |
40s |
| 優點 |
開源免費,不需要用戶下載安裝任何插件 |
| 缺點 |
加載速度慢,容易造成瀏覽器卡死 |
| Visifire |
|
| Visifire是基於微軟Silverlight的一個圖形組件,支持事件、放大縮小 |
|
| 數據量 |
6M |
| 數據格式 |
Xaml |
| 交互方式 |
Visifire通過ajax調用后台方法獲取數據,然后顯示 |
| 數據源時間 |
16s |
| 響應時間 |
2~3s |
| 優點 |
數據加載后響應比較快 |
| 缺點 |
不易定制,無法實現實時數據,用戶要下載安裝Silverlight組件 |
| FusionCharts |
|
| FusionCharts基於Js和Flash的圖形組件,支持事件、放大縮小 |
|
| 數據量 |
6M |
| 數據格式 |
XML 、JSON |
| 交互方式 |
FusionCharts通過ajax調用后台方法獲取數據,然后顯示 |
| 數據源時間 |
16s |
| 響應時間 |
1~2s |
| 優點 |
有固定的模版,響應速度快,交互流暢 |
| 缺點 |
收費,用戶要下載安裝Flash組件 |
| Ext4.0 |
|
| Ext4.0中自帶的圖表控件是基於Flash,支持事件、實時數據、提示框 |
|
| 數據量 |
6M |
| 數據格式 |
Xml,json |
| 交互方式 |
Ext圖表通過ajax調用后台方法獲取數據,然后顯示 |
| 數據源時間 |
16s |
| 響應時間 |
10s |
| 優點 |
框架體系中自帶,融合度高;不需要用戶下載安裝任何插件 |
| 缺點 |
加載速度慢,沒找到放大縮小的解決方案 |
| Highstock |
|
| Highstock是一款純js的圖表,圖表支持事件、實時數據、放大縮小、導出圖片、打印圖表功能 |
|
| 數據量 |
6M |
| 數據格式 |
Json輕數據格式 |
| 交互方式 |
Highstock通過ajax調用后台方法獲取數據,然后顯示; |
| 數據源時間 |
16.97s |
| 響應時間 |
0~1s |
| 優點 |
滿足系統需求; 交互響應速度快; 易於維護和定制格式、樣式、界面美觀; 開源免費; 不需要用戶下載安裝任何插件; |
| 缺點 |
X軸只支持日期 只支持線、柱、面圖表,不支持餅圖、雷達圖等圖表 |
通過結果很容易看出純js的Highstock圖表基本能滿足大數據可交互的需求,接下來我就以Highstock為基點進行大數據量繪制圖形的進行講解。
在進行實際的開發前最好到官網http://www.highcharts.com/ 看一些demos和api(要看Highstock的),這樣有助於詳細了解。
接下來就可以根據demo進行學習了,還可以在源碼中做一些個性化的修改。
