V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
ry_wang
V2EX  ›  JavaScript

请问有没有开源的代码可以实现类似正文中这种马赛克图的

  •  
  •   ry_wang · 2014-01-20 21:09:07 +08:00 · 4186 次点击
    这是一个创建于 3960 天前的主题,其中的信息可能已经有所发展或是发生改变。
    公司内部的监控展示系统,部分状态类的监控项用马赛克图来展示,简单明了,效果很好。

    但是自己前端属于手残级别的,现在只能自己用bootstrap的tooltip外加无数个div写了个简单的界面,当监控项数量很多时,浏览器打开页面极慢。

    不知道有没有类似highchart之类的开源项目能提供这种功能呢? 具体展示见下图:




    谢谢~~
    17 条回复    1970-01-01 08:00:00 +08:00
    alexrezit
        1
    alexrezit  
       2014-01-20 21:22:01 +08:00
    这玩意儿应该用 canvas 或者至少是 table 吧...
    binux
        2
    binux  
       2014-01-20 21:27:30 +08:00
    让我猜猜,你是不是一个div一个div追加到页面里面去的?
    ry_wang
        3
    ry_wang  
    OP
       2014-01-20 21:29:11 +08:00
    @binux 好机智,是的。。。
    @alexrezit canvas是啥,我去看看。。。
    binux
        4
    binux  
       2014-01-20 21:30:36 +08:00
    @ry_wang 先将html写到一个string里,然后一次添加到页面中去
    ry_wang
        5
    ry_wang  
    OP
       2014-01-20 21:32:41 +08:00
    @binux 就是一次追加进去的,但是监控项实在太多了。。
    就拿这个图,好几千台机器,每台机器都至少10个分区。。。所以能不慢么。。。
    unstop
        6
    unstop  
       2014-01-20 21:39:34 +08:00
    用 DIV 画是 OK 的,但是如果一个一个追加会有性能问题,因为导致了页面回流(reflow)之类的。@binux 的方案是可以的,先在 JS 里面拼接完毕之后再一次性加进去。

    另外,D3 有一个实现了类似效果的示例:http://mbostock.github.io/d3/talk/20111018/calendar.html

    话说回来,用 JS 自己画 Canvas 应该是最好的方案。
    ry_wang
        7
    ry_wang  
    OP
       2014-01-20 21:44:07 +08:00
    @unstop @binux 我现在的做法是数据解析成json后传到template,然后遍历来生成html的,我试下直接再后端生成html再传到template里试试,可以搞个临时方案先缓解缓解当前的问题。

    刚刚 @alexrezit 推荐的 canvas 在网上搜了搜貌似很合适的选择, 回头好好调研调研。
    谢谢几位啊
    unstop
        8
    unstop  
       2014-01-20 21:49:38 +08:00   ❤️ 1
    @ry_wang 另外我刚刚在搜索 D3 的这个示例的时候找到了这个,可能有帮助: http://kamisama.github.io/cal-heatmap/
    ry_wang
        9
    ry_wang  
    OP
       2014-01-20 21:57:12 +08:00
    @unstop 这个好赞!!!谢谢啦
    binux
        10
    binux  
       2014-01-20 22:09:16 +08:00
    @ry_wang http://jsbin.com/aSelozi/1
    很慢吗?根本没有啊,10w个div毫无压力啊,当然js执行是要很久,谁让数据量那么大
    不能分页吗,或者分开部分加载
    你确定是div的问题而不是模板引擎的问题,或者是reflow次数太多的问题?
    9hills
        11
    9hills  
       2014-01-20 22:17:55 +08:00
    这个想法很不错
    ry_wang
        12
    ry_wang  
    OP
       2014-01-20 22:27:59 +08:00
    @binux 这么一比确实是有些疑问,明天我再检查检查。

    从页面加载的显示效果来看,div是几行几行刷出来的。 想办法看看html解析的耗时,这样可能会追查的明白些。

    谢谢,@@
    ayanamist
        13
    ayanamist  
       2014-01-20 23:16:38 +08:00
    @binux 略微把 @binux 的优化了一下 http://jsbin.com/aSelozi/3 貌似速度快了内存占用小了。
    binux
        14
    binux  
       2014-01-20 23:20:34 +08:00
    @ayanamist 我记得javascript的 string+ 没有多余的性能代价吧。
    alexapollo
        15
    alexapollo  
       2014-01-20 23:30:55 +08:00
    做tuning嘛,做异步加载就好了,先把主页面加载进去,然后一个一个把小灯点亮~
    miniwade514
        16
    miniwade514  
       2014-01-21 09:43:42 +08:00
    感觉用 canvas 会更快吧, JS 的运算量相当,但是不用碰 DOM
    loading
        17
    loading  
       2014-02-13 12:41:06 +08:00
    在个人主页导航做过类似的东西,就是一个个div,把它变成点阵屏幕。。。还写了26字幕的map。
    IE爆卡。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2637 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 04:32 · PVG 12:32 · LAX 20:32 · JFK 23:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.