开发BS系统前端实时数据图表组件

有云天空 发布于 2016/06/03 09:52
阅读 46
收藏 0

[背景]

某BS系统,主要用于实时显示各类测量数据。目前传统的第三方开源图表组件,其性能不足,因此期望能够提供经过性能改造优化后的JS图表组件。

[需求]

开发需求:

开发一套前端Javascript图表组件,可采用已开源组件二次修改,或者重新开发,但均须满足[组件技术要求]中的要求。

 

系统业务说明:

项目为在浏览器中实时显示测量数据,需开发图表组件,供业务程序开发者使用。业务场景为,在一个页面中,可能存在4~12个图表,每个图表中包含2~4个数据曲线,数据均需要实时刷新显示(即此条数据后台一旦获取到后,前端图表就需要刷出此数据点)。

针对第一种数据发送情况,需要类似hightstock种的时间区域选择器选择观测时间区段,但要求此时数据实时刷新,不断的出现新数据。

针对第二种数据发送情况,需要图表从0开始,一直不断的在图表中刷新后台新数据,即不删除图表中原有点,不断增加新的点(类似hightcharts addPoint)。

组件需要能够支持快速的刷出新的数据点,并且同时一个图表中一个曲线数据点能够支撑50000以上个点。

 

原始数据背景介绍:

后台原始测量数据,会实时从上百个传感器获取测量数据,每个传感器数据频率为200ms(毫秒)一条数据,每条数据内容诸如下表。数据发送持续时间分为两种情况,一种为7×24发送,一种为指定时间段内发送。

采样时间 数据类别 数据值
20160101123030 温度 25

 

系统机器硬件介绍:

服务端硬件:CPU i7 3.4GHz,内存8G,STAT硬盘

客户端硬件:CPU i5 3.3GHz,内存4G,STAT硬盘

 

问题说明:

经过试验,目前主流的hightcharts,fusioncharts,echarts;在一个页面中编写了4个iframe,每个iframe中一个图表,每个图表2个曲线。采用了websocket和ajax,均在大数据量时(上万个点),前端浏览器反应迟钝、卡死、崩溃。

 

[组件技术要求]

1. 后台为J2EE,JAVA语言开发。前台为javascript,不限制前端浏览器,可使用最新的浏览器特性。

2. 组件基本依赖只能为jquery,但可以使用最新的jquery版本和特性。组件可使用纯JS,或者flash/flex等,但其调用api必须为JS。

3. 实时数据刷新,刷新率至少为500ms(毫秒),但要求每次刷新必须为后台在此时间段内收到的全部数据。(即如果后台200ms一条数据,则应该刷出至少2个数据点)。可采用websocket、commet等反向推送技术,实现前台数据实时更新。

4. 组件功能包含基本的折线、散点图,以及图上可增加x\y坐标轴基线(plotLine)、基域(plotArea)。

5. 组件需支持缩放。缩放功能越强越好。

6. 组件需提供前台和后台的图片导出。

7. 组件能够一个页面,12个图表,每个图表至少2条曲线、每个曲线5万个以上点的实时绘制,保证浏览器不卡顿。校验标准为对组件内曲线缩放,能够在0.5秒内平滑放大和缩小。

8. 交付时提供组件测试的页面程序。

9. 提供组件使用api文档。


[效果图]

charts.png

加载中
返回顶部
顶部