WEB端的绘图方式 讨论最优

目前做了一个监控数据的网站，因为一直要与后台进行交互，即AJAX请求，
这样可能会一连几天都会停留在这个页面上，这个页面的主要需求或者业务（功能）：

引用

• 根据二进制流数据 绘制波形图
• 根据传过来的一个度数在度盘中显示位置
• 每秒显示AJAX请求数据
• 一条数据解析完成刷新历史数据

引用

考虑在WEB端绘制图形和AJAX交互，绘图已知的几种方式

• JQuery - 插件 HighCharts 图形漂亮，商用付费，与AJAX交互内存增长块  200KB/S
• SVG - 基于XML的矢量位图，支持除IE外的大部分浏览器，谷歌，火狐等  待测
• VML- 基于XML的矢量位图，支持IE5.0 以上的浏览器   20KB/S
• 一直想自己封装SVG和VML 封装了一点感觉封装速度太慢，考虑不了太多
• Raphael - 封装了SVG 和 VML的JS库，效果怎么样 内存怎么样 没用过
• 还有一个JavaFX 不知道怎么样 没用过 提点意见
• JavaChart 就算了吧，服务器端，压力大啊，而且用过 占用带宽啊，显示不流畅

还有其他的什么好用绘图插件，或者ＪＳ绘图方式，请回帖告知！
需要耗费内存较少，可持续时间长的方式、、　thank you、、

大家讨论下在客户端使用哪种绘制图形方式比较方便，图形美观，且内存增长缓慢，甚至不增长呢 (重点)

评论

17 楼 奥义之舞 2011-04-15  

netfishx 写道

Raphael是很好的选择
canvas的问题是很难做单独节点的事件

感觉canvas 的资料 好难找啊 度娘 百科出来的更不可靠 canvas竟然是个动漫、、真悲剧

Raphael看着是行，效果是美观的，  不过估计要和svg一样了 还得换坐标了，呵呵
不过这个 也有10几kb的增长量   很少了 、、

16 楼 奥义之舞 2011-04-15  

红四团 写道

HighCharts所renderer出来的每个Element都是可以destroy的，每个element都有destroy方法。HighCharts封装了VML和SVG，基本上能够跨浏览器。每次刷新chart前，你一定要destroy以前的Element，否则肯定会有内存泄漏。其实如果不需要在iPad等不支持Flash的平台上使用，用Flex做图形展现应该是相当不错的选择，Flex还有个好处就是做实时监控比较容易，本身支持socket，可以datapush。

看来推荐Flex的比较多 一点、
不过谁能首先 说一下 Flex 实时刷新占用的宽带和内存问题啊，少的话就决定了，
这两个问题很重要、、

15 楼 奥义之舞 2011-04-15  

syf721530 写道

Flex其实在前端的表现很不错的，我公司现在就用Flex做实时展示。至于你说的宽带倒是没有考虑过。

额 、、 很重要啊 因为公司的业务 决定的 很多时候 网络传输速度 不能保证的
所以 可以看一下最低的传输量是多少么
再看一下 定时刷新内存增长率有么

14 楼 奥义之舞 2011-04-15  

tianzhou0374 写道

Direct+googleCanvas或直接使用flex。两种方案都支持所有浏览器。效率也超高。

flex 是在客户端 输出的swf 还是 服务器端啊、
定时刷新没问题吧  也倾向这种的现在，就是在考虑带宽问题，这个做的可是要最低一秒一刷新的，性能可以抗的住么

新学这个没问题，就怕学了之后还得换，换了有两三次了都

13 楼 奥义之舞 2011-04-15  

clue 写道

excanvas（explorercanvas.googlecode.com），能在IE下模拟canvas，支持IE6

HighCharts以前就是用这个库来着（新版本好像没有用了？）

如果用这个 可以跨浏览器是吧 直接IE5.0以上，火狐谷歌没问题吧，
效率怎么样，内存使用率怎么样，

说实话现在对第三方插件感觉很不靠谱，用的highcharts都是，跟ajax交互内存长的太快了，还不知道问题出到那

12 楼 奥义之舞 2011-04-15  

int08h 写道

IE9，Firefox3.6+，Chrome，Opera和Safari都没有问题

浏览器都太高端了 要向下兼容、、

起码得到IE5.0吧、、或者6.0

11 楼 netfishx 2011-04-15  

Raphael是很好的选择
canvas的问题是很难做单独节点的事件

10 楼 红四团 2011-04-15  

HighCharts所renderer出来的每个Element都是可以destroy的，每个element都有destroy方法。HighCharts封装了VML和SVG，基本上能够跨浏览器。每次刷新chart前，你一定要destroy以前的Element，否则肯定会有内存泄漏。其实如果不需要在iPad等不支持Flash的平台上使用，用Flex做图形展现应该是相当不错的选择，Flex还有个好处就是做实时监控比较容易，本身支持socket，可以datapush。

9 楼 syf721530 2011-04-15  

Flex其实在前端的表现很不错的，我公司现在就用Flex做实时展示。至于你说的宽带倒是没有考虑过。

8 楼 tianzhou0374 2011-04-15  

Direct+googleCanvas或直接使用flex。两种方案都支持所有浏览器。效率也超高。

7 楼 clue 2011-04-15  

excanvas（explorercanvas.googlecode.com），能在IE下模拟canvas，支持IE6

HighCharts以前就是用这个库来着（新版本好像没有用了？）

6 楼 int08h 2011-04-14  

IE9，Firefox3.6+，Chrome，Opera和Safari都没有问题

5 楼 奥义之舞 2011-04-14  

int08h 写道

Canvas+VML比较好，你的图表应该不算矢量图形（没有scale、rotate等要求），所以Canvas的绘图更有效率
至于不支持Canvas的IE低版本，要慢就慢吧……

是没有这个要求，不过用不用性能差不了多少，这个又可以支持服务器交互，就用了呗，

另外canvas 支持 的浏览器都有啥啊，Ie几以上

4 楼 奥义之舞 2011-04-14  

奥义之舞 写道

引用

   好吧 我又看到一个好用的WEB端技术，FLEX，以前看过，不知道跟JAvaFX 有木有区别，
Flex 是一个高效、免费的开放源框架，可用于构建具有表现力的 Web 应用程序
高效，不知道效率高不高，性能强不强
不知道我要是一直刷新页面图形 Flex能否撑得住

　一般被认为可能是 Flex 替代品的是OpenLaszlo和AJAX技术。
好吧 看到这又迷茫了 度娘说了
OpenLaszlo 是一种富客户机应用程序架构，依赖 JavaScript 来表达逻辑，并提供了传统 Flash 开发方式无法比拟的一些优点，包括高级的 UI 约束系统、面向对象的设计方法学以及内置的对 Web 服务和各种风格的远程过程调用（Remote Procedure Call，RPC）的支持

谁知道呢 ，没用过看着他们都吹得很是牛逼啊，尝试吧，、、、
感觉如果用了 FLEX 就够我用了，只是不知道在性能到底是那个框架做的好了，询问一下各位大牛的意见、、

另外，刚又看了 Flex采用的输出SWF格式的图像，不知道到时候结合AJAX时候 占用带宽多么，性能怎么样呢，速度快不

3 楼 int08h 2011-04-14  

Canvas+VML比较好，你的图表应该不算矢量图形（没有scale、rotate等要求），所以Canvas的绘图更有效率
至于不支持Canvas的IE低版本，要慢就慢吧……

2 楼 奥义之舞 2011-04-14  

引用

   好吧 我又看到一个好用的WEB端技术，FLEX，以前看过，不知道跟JAvaFX 有木有区别，
Flex 是一个高效、免费的开放源框架，可用于构建具有表现力的 Web 应用程序
高效，不知道效率高不高，性能强不强 貌似不免费、、
不知道我要是一直刷新页面图形 Flex能否撑得住

　一般被认为可能是 Flex 替代品的是OpenLaszlo和AJAX技术。
好吧 看到这又迷茫了 度娘说了
OpenLaszlo 是一种富客户机应用程序架构，依赖 JavaScript 来表达逻辑，并提供了传统 Flash 开发方式无法比拟的一些优点，包括高级的 UI 约束系统、面向对象的设计方法学以及内置的对 Web 服务和各种风格的远程过程调用（Remote Procedure Call，RPC）的支持

谁知道呢 ，没用过看着他们都吹得很是牛逼啊，尝试吧，、、、
感觉如果用了 FLEX 就够我用了，只是不知道在性能到底是那个框架做的好了，询问一下各位大牛的意见、、

1 楼 奥义之舞 2011-04-14  

引用

现在用了SVG+VML，直接用IF判断 真悲剧、、