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

[ry_wang]

公司内部的监控展示系统，部分状态类的监控项用马赛克图来展示，简单明了，效果很好。

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

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




谢谢~~

[alexrezit]

这玩意儿应该用 canvas 或者至少是 table 吧...

[binux]

让我猜猜，你是不是一个div一个div追加到页面里面去的？

[ry_wang]

@binux 好机智，是的。。。
@alexrezit canvas是啥，我去看看。。。

[binux]

@ry_wang 先将html写到一个string里，然后一次添加到页面中去

[ry_wang]

@binux 就是一次追加进去的，但是监控项实在太多了。。
就拿这个图，好几千台机器，每台机器都至少10个分区。。。所以能不慢么。。。

[unstop]

用 DIV 画是 OK 的，但是如果一个一个追加会有性能问题，因为导致了页面回流（reflow）之类的。@binux 的方案是可以的，先在 JS 里面拼接完毕之后再一次性加进去。

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

话说回来，用 JS 自己画 Canvas 应该是最好的方案。

[ry_wang]

@unstop @binux 我现在的做法是数据解析成json后传到template，然后遍历来生成html的，我试下直接再后端生成html再传到template里试试，可以搞个临时方案先缓解缓解当前的问题。

刚刚 @alexrezit 推荐的 canvas 在网上搜了搜貌似很合适的选择， 回头好好调研调研。
谢谢几位啊

[unstop]

@ry_wang 另外我刚刚在搜索 D3 的这个示例的时候找到了这个，可能有帮助： http://kamisama.github.io/cal-heatmap/

[ry_wang]

@unstop 这个好赞!!!谢谢啦

[binux]

@ry_wang http://jsbin.com/aSelozi/1
很慢吗？根本没有啊，10w个div毫无压力啊，当然js执行是要很久，谁让数据量那么大
不能分页吗，或者分开部分加载
你确定是div的问题而不是模板引擎的问题，或者是reflow次数太多的问题？

[9hills]

这个想法很不错

[ry_wang]

@binux 这么一比确实是有些疑问，明天我再检查检查。

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

谢谢，@@

[ayanamist]

@binux 略微把 @binux 的优化了一下 http://jsbin.com/aSelozi/3 貌似速度快了内存占用小了。

[binux]

@ayanamist 我记得javascript的 string+ 没有多余的性能代价吧。

[alexapollo]

做tuning嘛，做异步加载就好了，先把主页面加载进去，然后一个一个把小灯点亮~

[miniwade514]

感觉用 canvas 会更快吧， JS 的运算量相当，但是不用碰 DOM

[loading]

在个人主页导航做过类似的东西，就是一个个div，把它变成点阵屏幕。。。还写了26字幕的map。
IE爆卡。。。