在一个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进行学习了,还可以在源码中做一些个性化的修改。
|
请发表评论