推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 3985 天前的主题，其中的信息可能已经有所发展或是发生改变。
公司内部的监控展示系统，部分状态类的监控项用马赛克图来展示，简单明了，效果很好。
但是自己前端属于手残级别的，现在只能自己用bootstrap的tooltip外加无数个div写了个简单的界面，当监控项数量很多时，浏览器打开页面极慢。
不知道有没有类似highchart之类的开源项目能提供这种功能呢？ 具体展示见下图：
谢谢~~
但是自己前端属于手残级别的，现在只能自己用bootstrap的tooltip外加无数个div写了个简单的界面，当监控项数量很多时，浏览器打开页面极慢。
不知道有没有类似highchart之类的开源项目能提供这种功能呢？ 具体展示见下图：
谢谢~~
 |
1
alexrezit 2014-01-20 21:22:01 +08:00
这玩意儿应该用 canvas 或者至少是 table 吧...
|
 |
2
binux 2014-01-20 21:27:30 +08:00
让我猜猜，你是不是一个div一个div追加到页面里面去的？
|
 |
5
ry_wang OP @binux 就是一次追加进去的，但是监控项实在太多了。。
就拿这个图，好几千台机器，每台机器都至少10个分区。。。所以能不慢么。。。 |
 |
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 应该是最好的方案。 |
|
7
ry_wang OP |
|
8
unstop 2014-01-20 21:49:38 +08:00  1
@ry_wang 另外我刚刚在搜索 D3 的这个示例的时候找到了这个，可能有帮助： http://kamisama.github.io/cal-heatmap/
|
|
10
binux 2014-01-20 22:09:16 +08:00
@ry_wang http://jsbin.com/aSelozi/1
很慢吗？根本没有啊，10w个div毫无压力啊，当然js执行是要很久，谁让数据量那么大 不能分页吗，或者分开部分加载 你确定是div的问题而不是模板引擎的问题，或者是reflow次数太多的问题？ |
 |
11
9hills 2014-01-20 22:17:55 +08:00
这个想法很不错
|
|
12
ry_wang OP |
 |
13
ayanamist 2014-01-20 23:16:38 +08:00
|
 |
15
alexapollo 2014-01-20 23:30:55 +08:00
做tuning嘛，做异步加载就好了，先把主页面加载进去，然后一个一个把小灯点亮~
|
 |
16
miniwade514 2014-01-21 09:43:42 +08:00
感觉用 canvas 会更快吧， JS 的运算量相当，但是不用碰 DOM
|
 |
17
loading 2014-02-13 12:41:06 +08:00
在个人主页导航做过类似的东西，就是一个个div，把它变成点阵屏幕。。。还写了26字幕的map。
IE爆卡。。。 |
Select Language