我们正在考虑在我们的应用程序中用ExtJS图表替换FusionCharts,因为:
我看过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中的稳定性和性能。有谁知道从那时起它是否变得更好?
答案 0 :(得分:2)
根据我的经验,ExtJs 4图表仍然是原始的并且存在很多问题。例如,时间轴确实是错误的,我必须找到解决方法,只是为了显示几个系列的折线图(最后用数字轴替换它,将时间戳加载到其中)。它在大数据集上也存在性能问题,因此我必须对数据进行分组并将其减少为较小的数据集。
但另一方面,我很高兴Sencha最终用html5替换flash图表。它实际上让您可以自由地修改和调整图表。有时它需要查看图表的源代码,但无论如何它不是闪存而且很酷!我相信Sencha很快就会改进他们的排行榜。
答案 1 :(得分:2)
通过使用ExtJS 4.0.7中的图表而不是FusionCharts 3.2,我看到内存使用量,CPU负载和渲染时间显着减少,通常大约为70-85%。
我最近有时间测试Ext的图表。重写组件以将Ext 4图表集成到Ext 3面板中是有点痛苦的,但是只需几天的工作,我就可以从服务器中绘制实际数据。
我试图解决的基本图表问题如下图所示:
我们绘制了设备上多个插座的功率读数趋势图。这在FusionCharts中运行良好,直到最近我们开始使用168个出口(并且可能在一个页面上有几个这样的设备)渲染设备。我怀疑没有浏览器可以处理那么多Flash,所以我构建了一个基本页面来渲染其中一个设备并在几个不同的浏览器中测试它。
“F”表示FusionCharts。 “E”表示ExtJS。
设备:
=========
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中绘制图表是一个巨大的胜利。