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、、

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

评论

57 楼 ggpp224 2011-04-21  

Extjs 4 目前还是测试版 beta3,sencha官方已经已经把svg和vml封好了，用户访问的时候js会检测浏览器的不同来自动使用svg或vml，楼主就不用自己封了，相信效率也会比楼主自己封的好。



Drawing & Charting
One of the most exciting new features of Ext JS 4.0 is the brand new Drawing & Charting engine. While earlier releases of Ext JS had charting features, the new charting capabilities in Ext JS 4 are truly groundbreaking, doing away with Flash entirely; in its place: fully JavaScript-powered, DOM accessible charts. Design, development, and even animate the most intuitive, eye-catching charts. No other framework provides this level of sophistication for displaying data. Your users will be amazed.


Native Drawing
It has always been hard to draw things in web applications. HTML is really not cut out for creating charts and other richly interactive imagery, but we really want that in our applications. Typically this need has been met with Adobe Flash, but this gave us two problems: we like writing code in JavaScript, and Flash isn’t available on all devices. Our solution to these problems is a pure-JavaScript drawing library that can create incredibly rich charting and graphics. It works everywhere — from IE6 to iOS — and will also be available as an add-on for Sencha Touch.

Powering all of this is Ext.draw, a brand new package for Ext JS 4 which normalizes drawing engine differences and provides a simple unified drawing API. Ext.draw works with SVG and VML, automatically using the best engine it can find on each browser. Everything is vector based, which means you can zoom it to any level and it still looks crisp. (We’re also planning Canvas support for a 4.x release.)

56 楼 shlei 2011-04-20  

如果你把你浏览器内置的flash player plugin 卸掉，我估计没几个网站是能完全显示的，不信的话可以试试。

55 楼 shlei 2011-04-20  

idle_sun 写道

我不知道flash还是不是前端之王.

但是
在　技术存在弊端、苹果倒戈、adobe转投微软(ms可是有silverlight)、html5兴起等多方面因素. flash（或flex）的被取代是迟早的

跟风？被取代？曾有人说过Java会取代C，现在C的使用率也没下去，曾有人说html5会取代Flex/Flash。。。看着吧，时间会证明一切的。
BTW，如果市场上有html5或silverlight做的Ilog套件，我就承认Flex OUT了。

请各位说Flex会被取代的人看完IBM的Ilog套件再来评价！！！

54 楼 idle_sun 2011-04-20  

我不知道flash还是不是前端之王.

但是
在　技术存在弊端、苹果倒戈、adobe转投微软(ms可是有silverlight)、html5兴起等多方面因素. flash（或flex）的被取代是迟早的

53 楼 faiinlove 2011-04-20  

Eric.D.Chen 写道

happysoul 写道

其实Flex成品已经有很多了~~ 见过的就有用flex做的股票界面
样式和大智慧之类的很相似！
除了第一次会等的比较无奈（带宽问题）之后就会非常快了！
他的传输区别于http 使用二进制流的通道方式传输数据
请求和返回的速度和带宽占用上都非常的小~

还2进制......，他的传输区别于http....你认为这是优点？你把这破玩意跟你现在用的框架整合一下，看看用起来有多别扭，目前像样的flex应用一个都没有，一些山寨的玩意就别说出来丢人了。看看现在哪个成熟的商业项目用它？JE的菜菜太菜了，不懂别瞎支招。

你想要看成熟的商业项目？建议你看看ihaveu.com 优众，这个是淘宝和MSN以前的老大投资搞的。前端项目是sliver劳做的，别把flex看的那么不堪，工具没有优劣，是看你自己的水平。

52 楼 skyfen 2011-04-20  

我用HighCharts很爽啊。做出了30多图表。觉得很好用。

51 楼 ltian 2011-04-19  

楼主不太适合搞技术，赶快转行

50 楼 dzt 2011-04-19  

我们用amchars实现的波形图

49 楼 xushaomin1122 2011-04-19  

其实可以用服务器pushlet推送的方式，不用ajax请求

48 楼 奥义之舞 2011-04-17  

HATS 写道

我是编程门外汉，所以一直潜着，从来都不敢说话，不过今天看到楼主这个应用跟我的有点类似，所以也想说两句。
我也是做了一个监控程序，前端用flot画曲线，在IE6下调用excanvas模拟canvas，我只使用了普通的曲线，就是那种折线图。

我的应用比较简单，绘图区域宽度是500像素，于是我用一个长度为500的队列保存实时数据，每秒用ajax获取一次新数据放入队尾。之后用flot重绘一下曲线。另外页面中还有50个数据在实时刷新，周期也是1秒。

我的要求不高，这样的曲线精度和实时性可以满足要求，从前天到现在，程序在chrome10,FF4和IE6下一直在跑。
我是用两台机器测试的，其中一台机器安装的软件不多，浏览器也都很干净，CPU是AMD LX800 500MHz CPU，内存256M，显卡共享掉16M，操作系统是XP。服务端装在这台机器上，是用python的一个框架bottle写的，server直接用的paste。这台机器只运行chrome做监控，全屏显示，一直很稳定。
另外一台机器是DELL的服务器，四核至强，1G内存，同时跑chrome，FF和IE6。chrome是每几十分钟就要崩溃一次，FF和IE一直很稳定。我认为是自己程序写得不行导致chrome不稳定，另外也怀疑这个chrome是不是因为装了几个插件所以才这样，以后决定重装一下试试。

以上两台机器中，浏览器消耗的内存一直没见增长，只是会在一个范围内上下波动。

当初我选flot主要是因为它功能可以满足需要，同时协议比较灵活。你说的那个JS框架我也试用过，不过是商业的，所以没有选用。

我想自己只是不得已才硬着头皮编程，水平肯定不能跟你们这些专业的比，但这个程序在某些浏览器上运行了两天也没出问题，我觉得楼主是不是多虑了，先用一台机器跑上几天测一下代码是不是能稳定运行，也许实际没你想象得复杂呢。

谢谢呵，你狠实事求是，真的感谢、、
我决定认真的做下测试，谢谢

47 楼 HATS 2011-04-17  

我是编程门外汉，所以一直潜着，从来都不敢说话，不过今天看到楼主这个应用跟我的有点类似，所以也想说两句。
我也是做了一个监控程序，前端用flot画曲线，在IE6下调用excanvas模拟canvas，我只使用了普通的曲线，就是那种折线图。

我的应用比较简单，绘图区域宽度是500像素，于是我用一个长度为500的队列保存实时数据，每秒用ajax获取一次新数据放入队尾。之后用flot重绘一下曲线。另外页面中还有50个数据在实时刷新，周期也是1秒。

我的要求不高，这样的曲线精度和实时性可以满足要求，从前天到现在，程序在chrome10,FF4和IE6下一直在跑。
我是用两台机器测试的，其中一台机器安装的软件不多，浏览器也都很干净，CPU是AMD LX800 500MHz CPU，内存256M，显卡共享掉16M，操作系统是XP。服务端装在这台机器上，是用python的一个框架bottle写的，server直接用的paste。这台机器只运行chrome做监控，全屏显示，一直很稳定。
另外一台机器是DELL的服务器，四核至强，1G内存，同时跑chrome，FF和IE6。chrome是每几十分钟就要崩溃一次，FF和IE一直很稳定。我认为是自己程序写得不行导致chrome不稳定，另外也怀疑这个chrome是不是因为装了几个插件所以才这样，以后决定重装一下试试。

以上两台机器中，浏览器消耗的内存一直没见增长，只是会在一个范围内上下波动。

当初我选flot主要是因为它功能可以满足需要，同时协议比较灵活。你说的那个JS框架我也试用过，不过是商业的，所以没有选用。

我想自己只是不得已才硬着头皮编程，水平肯定不能跟你们这些专业的比，但这个程序在某些浏览器上运行了两天也没出问题，我觉得楼主是不是多虑了，先用一台机器跑上几天测一下代码是不是能稳定运行，也许实际没你想象得复杂呢。

46 楼 EldonReturn 2011-04-17  

lokinell2006 写道

奥义之舞 写道

目前做了一个监控数据的网站，因为一直要与后台进行交互，即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、、

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

还有Dojo Chart！！！！

就那个Charting/GFX啦，图形渲染本身没问题。让浏览器默默去setInterval到后台去取就行。

45 楼 lokinell2006 2011-04-16  

奥义之舞 写道

目前做了一个监控数据的网站，因为一直要与后台进行交互，即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、、

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

还有Dojo Chart！！！！

44 楼 lokinell2006 2011-04-16  

奥义之舞 写道

目前做了一个监控数据的网站，因为一直要与后台进行交互，即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、、

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

你可以试试IBM ILOG JVIews。
http://www-01.ibm.com/software/integration/visualization/java/

43 楼 lookdd1 2011-04-16  

你MB。。。

42 楼 奥义之舞 2011-04-16  

Eric.D.Chen 写道

happysoul 写道

其实Flex成品已经有很多了~~ 见过的就有用flex做的股票界面
样式和大智慧之类的很相似！
除了第一次会等的比较无奈（带宽问题）之后就会非常快了！
他的传输区别于http 使用二进制流的通道方式传输数据
请求和返回的速度和带宽占用上都非常的小~

还2进制......，他的传输区别于http....你认为这是优点？你把这破玩意跟你现在用的框架整合一下，看看用起来有多别扭，目前像样的flex应用一个都没有，一些山寨的玩意就别说出来丢人了。看看现在哪个成熟的商业项目用它？JE的菜菜太菜了，不懂别瞎支招。

请你说一个 你确确实实 用过了解过 的 前端绘图技术，希望不要只是 看到介绍 就 否定一个 技术 或肯定一个技术，
这种 不负责任的 行为 是不可取的， 说话 就要负责，  你上面说的 请问 你确实 用过Flex么，

还有不希望 你 一棒子 打死一群人 ，你可以针对 某一个发表意见的 发表你的反对意见，但请你不要这样说

41 楼 奥义之舞 2011-04-16  

lookdd1 写道

那不是flex....就是简单的flash     你用了后你领导要是不夸你你来骂我。。。SVG,VML再画也搞不过flash的效果来的炫。。。。效率？你说什么效率？不需要神马狗屁socket。实时通信你就ajax定时轮询啊， 基于HTTP!!!  前端用Js重载flash的数据，它会重绘替图形。。。。  。。。没用过我和你推荐个鸟粪啊。 http://www.fusioncharts.com/


MD。。。我居然这么热心打这么多字。。。

貌似flash 面向的是美工大众，flex 是面向程序员的，偶是程序员，不会用flash，

效率 问题 希望 有一个 确确实实用过的 人来发话

40 楼 奥义之舞 2011-04-16  

      

hepeng421 写道

Eric.D.Chen 写道

Flex最好别用，弊端太多，等你后悔的时候就来不及了。效率谁说的高？你们自己测试过么？通信费事，效率低下，淘汰的东西就别考虑了，现在随便什么技术都比它强，你可以考虑用silverlight，前端表现王道。

楼上的拿silver出来和flash比，说明楼主不了解aodbe的产品，web上的界面flash是非常优秀成熟的。

39 楼 奥义之舞 2011-04-16  

Eric.D.Chen 写道

Flex最好别用，弊端太多，等你后悔的时候就来不及了。效率谁说的高？你们自己测试过么？通信费事，效率低下，淘汰的东西就别考虑了，现在随便什么技术都比它强，你可以考虑用silverlight，前端表现王道。

我问一下，你用过Flex么，怎么证明 这个淘汰了 还有silverlight这个 ，好像不兼容吧、、
Flex 有 Flash环境的支持，跨这个跨那个 效率方面 暂时没用呢，不发表意见
希望有确凿的事实证明 效率 不行，不是喷的
silverlight前端表现 ，貌似 flash 才是 前端效果之王吧

38 楼 hepeng421 2011-04-16  

Eric.D.Chen 写道

Flex最好别用，弊端太多，等你后悔的时候就来不及了。效率谁说的高？你们自己测试过么？通信费事，效率低下，淘汰的东西就别考虑了，现在随便什么技术都比它强，你可以考虑用silverlight，前端表现王道。

楼上的拿silver出来和flash比，说明楼主不了解aodbe的产品，web上的界面flash是非常优秀成熟的。