asp.net中绘制大数据量的可交互的图表
在一个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进行学习了，还可以在源码中做一些个性化的修改。
