創建一個動態間隔的垂直線的背景

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秒內完成的情況下，我已經嘗試使用一張桌子和一個divs來創造它沒有時間差異。如果我刪除了樣式，那麼它們可以在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>'); 
     }); 
    }); 
});