如何在HTML/CSS/JS中實現類似Excel 2007的數據條？

Question

我想要做的是生成以下HTML/CSS/JS版本。網格線和其他方面並不重要。這更像是一個如何做背景數據庫的問題。

alt text http://blogs.tech-recipes.com/shamanstears/files/2008/04/excel_databars2.png

Answer 1

將條形圖作爲背景圖像並放置它們以顯示值。例如。與100px的固定的列寬：

<div style="background: url(bg.gif) -50px 0 no-repeat;">5</div> 
<div style="background: url(bg.gif) -20px 0 no-repeat;">8</div> 

如果你的列必須是靈活的尺寸（不固定，並在頁面產生的時間不知道），這是一個有點棘手：

<style type="text/css"> 
    .cell { position: relative; } 
    .cell .back { position: absolute; z-index: 1; background: url(bg.gif); } 
    .cell .value { position: relative; z-index: 2; } 
</style> 

<div class="cell"> 
    <div class="back" style="width: 50%;">&nbsp;</div> 
    <div class="value">5</div> 
</div> 
<div class="cell"> 
    <div class="back" style="width: 80%;">&nbsp;</div> 
    <div class="value">8</div> 
</div> 

Answer 2

這樣cross-browser gradient基於JavaScript的解決方案可能是一個良好的開端。

有了一些DHTML，你可以製作一個bar with a given length。

Answer 3

我會使用來自Ext JS庫的Grid組件或DataTable組件的Yahoo YUI庫。跨瀏覽器兼容性等工作已爲您完成。