ExtJS图表的表现比FusionCharts好吗?

时间:2012-02-11 05:22:01

标签: extjs fusioncharts

我们正在考虑在我们的应用程序中用ExtJS图表替换FusionCharts,因为:

  1. 我们已经在整个UI中使用ExtJS。删除其他商业第三方依赖项和API的开销和费用会很好。
  2. 我们希望能够在无Flash移动设备上显示这些图表。
  3. 扩展和管理FusionCharts的Flash组件要比普通的DOM对象困难得多。
  4. 我们的应用程序的一些特定页面充满了图表(大约数百个类似火花的图表),而Flash正在吞噬内存,就像它的样式一样。
  5. 我看过FusionCharts的JavaScript后备,而且它在美学上还不够。另外,我不希望JavaScript实现是“后备”。

    我们目前使用的是ExtJS 3.2.0。从短期来看,升级到4.x是不可能的,但如果我们认为值得付出努力,我们可能会使用沙盒Ext 4来使用它的图表。

    所以我的问题基本上是 ExtJS 4的JavaScript图表表现明显优于FusionCharts Flash图表吗?我主要关注内存使用情况,其次是渲染时间。


    我看到this Stack Overflow question表明,至少从2011年8月开始,Ext图表并没有真正达到吸引力。我知道Sencha正致力于提高4.1中的稳定性和性能。有谁知道从那时起它是否变得更好?

2 个答案:

答案 0 :(得分:2)

根据我的经验,ExtJs 4图表仍然是原始的并且存在很多问题。例如,时间轴确实是错误的,我必须找到解决方法,只是为了显示几个系列的折线图(最后用数字轴替换它,将时间戳加载到其中)。它在大数据集上也存在性能问题,因此我必须对数据进行分组并将其减少为较小的数据集。

但另一方面,我很高兴Sencha最终用html5替换flash图表。它实际上让您可以自由地修改和调整图表。有时它需要查看图表的源代码,但无论如何它不是闪存而且很酷!我相信Sencha很快就会改进他们的排行榜。

答案 1 :(得分:2)

TL; DR

通过使用ExtJS 4.0.7中的图表而不是FusionCharts 3.2,我看到内存使用量,CPU负载和渲染时间显着减少,通常大约为70-85%。

简介

我最近有时间测试Ext的图表。重写组件以将Ext 4图表集成到Ext 3面板中是有点痛苦的,但是只需几天的工作,我就可以从服务器中绘制实际数据。

我试图解决的基本图表问题如下图所示:

Basic charts

我们绘制了设备上多个插座的功率读数趋势图。这在FusionCharts中运行良好,直到最近我们开始使用168个出口(并且可能在一个页面上有几个这样的设备)渲染设备。我怀疑没有浏览器可以处理那么多Flash,所以我构建了一个基本页面来渲染其中一个设备并在几个不同的浏览器中测试它。

测试结果

“F”表示FusionCharts。 “E”表示ExtJS。

设备:

  • OS X: 15英寸MacBook Pro 5,1,2.4 GHz Intel Core 2 Duo,4 GB RAM
  • Win7: 21英寸iMac 4,1,1.83 GHz Intel Core 2 Duo,2 GB RAM
  • WinXP:在VirtualPC中运行XP的同一iMac(1 GB RAM)
=========
OS X 10.7
=========

Browser/Test    Real Mem (MB)     Virt Mem (MB)     Priv Mem (MB)     CPU (%)     Render (s)
--------------------------------------------------------------------------------------------

Chrome 17.0.963.56
F1              653               532               333                14         22.8
F2              648               535               336                15         22.7
F3              656               538               339                15         22.3
                ---               ---               ---               ---         ----
                652               535               336                15         22.6

E1              104               129                80                 0          4.0
E2              104               129                80                 0          4.7
E3              104               129                80                 0          3.7
                ---               ---               ---               ---         ----
                104               129                80                 0          4.1

+/-             -84%              -76%              -76%             -100%         -82%


Firefox 10.0.2
F1              905               450               257                14         10.1
F2              889               435               242                15         10.5
F3              889               465               272                15         10.1
                ---               ---               ---               ---         ----
                894               450               257                15         10.2

E1              239               230               161                 0          3.5
E2              256               215               177                 0          3.7
E3              253               218               181                 0          4.6
                ---               ---               ---               ---         ----
                249               221               173                 0          3.9

+/-             -72%              -51%              -67%             -100%         -62%


Safari 5.1.3
F1              1070              998               717                16         22.7
F2              1130              993               670                16         23.0
F3              1120              902               631                17         22.9
                ----              ---               ---               ---         ----
                1107              964               673                16         22.9

E1               153              290               125                 0          3.4
E2               153              291               125                 0          3.5
E3               153              291               125                 0          3.3
                ----              ---               ---               ---         ----
                 153              291               125                 0          3.4

+/-              -86%             -70%              -81%             -100%         -85%


=========
Windows 7
=========

Browser         Working Set (MB)    Priv Working Set (MB)     Commit Size (MB)    CPU (%)   Render (s)
------------------------------------------------------------------------------------------------------

Chrome 17.0.963.56
F1              638                 619                       633                  45       16.9
F2              639                 620                       633                  43       16.8
F3              639                 620                       633                  45       16.9
                ---                 ---                       ---                 ---       ----
                639                 620                       633                  45       16.9

E1              100                  85                        96                   0        4.4
E2               95                  81                        92                   0        4.5
E3              101                  87                        98                   0        4.3
                ---                 ---                       ---                 ---       ----
                 99                  84                        95                   0        4.4

+/-             -85%                -87%                      -85%               -100%       -74%


Firefox 10.0.2
F1              650                 638                       657                  52       11.5
F2              655                 641                       659                  54       16.9
F3              650                 638                       656                  52       11.4
                ---                 ---                       ---                 ---       ----
                651                 639                       657                  52       13.3

E1              138                 111                       119                   0        3.6
E2              141                 113                       121                   0        3.6
E3              134                 106                       114                   0        3.8
                ---                 ---                       ---                 ---       ----
                138                 110                       118                   0        3.6

+/-             -79%                -83%                      -82%               -100%       -73%


IE 9.0.8112.16421
F1              688                 660                       702                  19       13.1
F2              645                 617                       661                  16       19.0
F3              644                 615                       660                  15       19.0
                ---                 ---                       ---                 ---       ----
                659                 631                       674                  17       17.0

E1              100                  73                        90                   0        4.8
E2               98                  73                        90                   0        4.5
E3               99                  73                        90                   0        4.3
                ---                 ---                       ---                 ---       ----
                 99                  73                        90                   0        4.5

+/-             -85%                -88%                      -87%               -100%       -74%


==========
Windows XP
==========

Browser/Test    Mem Usage (MB)      Virt Mem Usage (MB)     CPU (%)   Render (s)
--------------------------------------------------------------------------------

IE 8.0.6001.18702
F1              653                 658                      56       19.5
F2              652                 658                      58       19.6
F3              652                 658                      60       18.9
                ---                 ---                     ---       ----
                652                 658                      58       19.3

E1              272                 266                       2       38.5
E2              271                 266                       2       37.4
E3              271                 266                       2       37.3
                ---                 ---                     ---       ----
                271                 266                       2       37.7

+/-             -58%                -60%                    -97%       +95%


IE 7.0.5730.13
F1              721                 726                      80       29.1
F2              691                 698                      75       25.9
F3              695                 698                      78       27.0
                ---                 ---                     ---       ----
                702                 707                      78       27.3

E1              302                 294                       1       67.4
E2              301                 294                       0       66.5
E3              301                 294                       0       65.8
                ---                 ---                     ---       ----
                301                 294                       0       66.6

+/-             -57%                -68%                   -100%      +144%

Notes:

- CPU (%) was measured once the charts had finished rendering and
  the browser was idling.
- Render (s) was the time measured between when the data finished
  loading and when the charts were fully rendered and usable.

结论

在IE8和IE7上除渲染时间以外的每个指标中,ExtJS图表的表现都大大超过了FusionCharts。虽然测试是针对我们的用例的,但我希望在类似情况下看到类似(如果不那么激烈)的结果 - 即单页上的大量图表。

这就是说本机图表的定性优势,例如真正的DOM脚本和样式,与ExtJS框架的其余部分直接集成,以及访问无Flash移动设备上的图表。如果你可以投入时间,那么在Ext 4中绘制图表是一个巨大的胜利。