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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 4522 days ago, the information mentioned may be changed or developed.

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

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

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

谢谢~~

马赛克

监控

展示

17 replies • 1970-01-01 08:00:00 +08:00

alexrezit

Jan 20, 2014

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

binux

Jan 20, 2014

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

ry_wang

Jan 20, 2014

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

binux

Jan 20, 2014

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

ry_wang

Jan 20, 2014

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

unstop

Jan 20, 2014

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

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

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

ry_wang

Jan 20, 2014

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

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

unstop

Jan 20, 2014