Question

我有一个相当复杂的视图，涉及垂直线的背景网格，表示每个时间段为5分钟。这些线的间距与高度一样是动态的。以下是我目前如何生成它们，

**snip**
outtxt_norm = '<div class="tl-td" style="width: ' + 
              (TIME_SECONDSPERHALFHOUR*_scale/6) + 
              'px; height: ' + (_table_height) + 'px;"></div>';
outarr = [];
for(idx = 0, difference = 288*totaldays; idx < difference;){
     outarr[idx++] = outtxt_norm;
}
$('#parent').append(outarr.join(''));
outarr = [];

**snip**

totaldays可以是1到30.在它是30的情况下，.append（）调用需要10秒以上才能完成，我尝试使用表和div来创建它而没有时间差异。如果我删除了样式，那么它们可以在1秒内创建，但随后将样式应用到它们会导致FF崩溃。

是否有更快的方法来创建动态宽度垂直线的背景？

Answer 1

我不确定你用的是什么。如果它像图形一样用于数据可视化，那么SVG可能是一个不错的选择。请检查raphaeljs。

希望有所帮助

Answer 2

DEMO 2： http://ask.altervista.org/php5/demo/creating-a-background-of-dynamically-spaced-vertical-lines/

服务器端

<?php
 header('Content-type: application/json');
 $array = array();
 for ($i = 0; $i <= 4000; $i++) {
        array_push( $array, array( rand(1,2) , ( rand(1,30) * 5 ) ) );
    }                           
   echo json_encode($array);
?>

客户端

$(function() {
    $.getJSON('points.php',function(data) {
        $.each(data,function(i, item) {
            $('#points-map').append('<div class="inner" style="width:' + data[i][0] + 'px;height:' + data[i][1] + 'px"></div>');
        });
    });
});

创建动态间隔垂直线的背景

2 个答案: