V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ck1llc
V2EX  ›  前端开发

Chart 组件渲染性能问题

  •  
  •   ck1llc ·
    ck1llc · 2016-03-09 18:04:02 +08:00 · 2551 次点击
    这是一个创建于 2993 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前提:

    公司产品目前使用的图表组件是 FusionCharts flash 版本,新版产品中准备去除产品中 flash 相关组件。

    目前可选组件有: FusionCharts JS 版( FusionCharts Suite XT v3.10.0 ), HighCharts , ECharts 。
    从性能测试结果来看, HighCharts 和 ECharts 性能接近,甩 FusionCharts 一大截。
    从图形扩展性来看, ECharts 缺少 3D 图的支持,不满足目前产品对图表组件的要求。

    我个人比较倾向 HighCharts ,但是由于工作量及前向兼容问题,领导要求使用 FusionCharts 。

    问题

    FusionCharts 和 HighCharts 都是使用 svg 绘图的,但是同样数据量下,渲染速度, CPU 及内存差别巨大。在 30 线*168 点数据量下(吐槽下领导定的规格,什么都看不清楚), HighCharts 很快能加载出来,且操作流畅。 FusionCharts 往往导致 Chrome 无响应。

    自己非专业前端,使用 chrome 的 profiles 工具也瞧不出什么眉目,求前端大神指点下两者究竟性能差在哪儿!


    Demo 如下:由于线条过多时,浏览器容易卡死,请修改变量 lineNumber 后测试
    FusionCharts Demo:
    http://jsfiddle.net/ck1llc/bpksx1yk/

    HighCharts Demo:
    http://jsfiddle.net/ck1llc/uadzf2bt/

    2 条回复    2016-03-12 16:57:52 +08:00
    ck1llc
        1
    ck1llc  
    OP
       2016-03-10 08:33:50 +08:00
    是我描述得不清楚呢,还是这两个组件用得人比较少···
    wyc829
        2
    wyc829  
       2016-03-12 16:57:52 +08:00
    源码看得少..
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2090 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 10:44 · PVG 18:44 · LAX 03:44 · JFK 06:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.