使用javascript更改欄寬度

Question

我需要一些幫助來更改欄寬。我正在創建一個簡單的水平條形圖，需要更改條形的寬度取決於百分比數據。的jsfiddle鏈接http://jsfiddle.net/kmc3ohab/2/

在此先感謝

var data = { 
 
    "box1": { 
 
     "bar1": "80%", 
 
     "bar2": "60%", 
 
     "bar3": "40%", 
 
     "bar4": "50%", 
 
     "total": "60%", 
 
    }, 
 
}; 
 

 
$(document).ready(function() { 
 
    $(".score-text").html(data.box1.total); 
 
    $(".data").text(data.box1.bar1); 
 
    $(".data").text(data.box1.bar2); 
 
    $(".data").text(data.box1.bar3); 
 
    $(".data").text(data.box1.bar4); 
 
}); 
 

 

body { 
 
\t background: #efefef; 
 
\t width: 100%; 
 
\t margin: 0px; 
 
\t text-align: center; 
 
} 
 

 
h2 { 
 
\t font-family: 'Noto Sans', serif; 
 
\t color: #b71f38; 
 
\t font-weight: 300; 
 
\t margin: 0px; 
 
} 
 

 
h3 { 
 
\t font-family: 'Noto Sans', serif; 
 
\t color: #444444; 
 
\t font-weight: 200; 
 
\t margin: 0px; 
 
} 
 

 
#colLeft { 
 
\t width: 50%; 
 
\t float: left; 
 
} 
 

 
#colRight { 
 
\t width: 50%; 
 
\t float: right; 
 
} 
 

 
#row { 
 
\t background: #e2e2e2; 
 
\t width: auto; 
 
\t height: 230px; 
 
\t margin: 15px; 
 
\t border-radius: 5px; 
 
} 
 

 
#insideColLeft { 
 
\t width: 30%; 
 
\t float: left; 
 
} 
 

 
#insideColRight { 
 
\t width: 69%; 
 
\t float: right; 
 
\t padding-top: 8px; 
 
\t padding-right: 5px; 
 
} 
 

 
.circle { 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t border-radius: 50%; 
 
\t width: 150px; 
 
\t position: relative; 
 
\t background: #b71f38; 
 
} 
 

 
.circle:before { 
 
\t content: ""; 
 
\t display: block; 
 
\t padding-top: 100%; 
 
} 
 

 
.circle-inner { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t bottom: 0; 
 
\t right: 0; 
 
\t text-align: center; 
 
} 
 

 
.score-text { 
 
\t margin: auto; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t bottom: 0; 
 
\t right: 0; 
 
\t height: 1em; 
 
\t line-height: 1em; 
 
\t font-size: 30px; 
 
\t font-family: 'Fjalla One', sans-serif; 
 
\t color: #ffffff; 
 
} 
 

 
.date { 
 
\t font-family: 'Fjalla One', sans-serif; 
 
\t text-align: center; 
 
\t color: #333333; 
 
} 
 

 
ul.graph { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t list-style-type: none; 
 
} 
 
\t 
 
ul.graph li { 
 
\t margin: 10px; 
 
\t height: 25px; 
 
\t background: #ccc; 
 
\t color: #fff; 
 
} 
 
\t 
 
ul.graph li.data { 
 
\t background: #f4ebb8; 
 
} 
 
\t

<div id="row"> 
 
     <h2>Title</h2> 
 
     <h3>Subtitle</h3> 
 
     <div id="insideColLeft"> 
 
     <div class="circle"> 
 
      <div class="circle-inner"> 
 
      <div class="score-text"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     </div> 
 
     <div id="insideColRight"> 
 
     <ul class="graph"> 
 
      <li class="data">bar 1</li> 
 
      <li class="data">bar 2</li> 
 
      <li class="data">bar 3</li> 
 
      <li class="data">bar 4</li> 
 
     </ul> 
 
     </div> 
 
    </div>

如果我有超過1個數據集？我如何做循環來檢查每個數據？另外，如果我需要從本地csv文件加載數據。爵士小提琴更新http://jsfiddle.net/kmc3ohab/6/

Answer 1

試試這個：http://jsfiddle.net/kmc3ohab/5/

$(document).ready(function() { 
    $(".score-text").html(data.box1.total); 
    $(".data").each(function(index, value) { 
     width = eval('data.box1.bar' + (index+1)); 
     value.innerText = width; 
     value.style.width = width; 
    }); 
}); 

基本回答您的問題每個杆件上設置style.width。擴展到您的解決方案也：

• 做一切循環。注意：如果bar值存儲在數組中，那麼會更好，因此您不需要使用eval（）。
• 正確設置條上的文本和循環中條的寬度。

編輯有關酒吧的多個部分的新問題。

顯示多個部分的確取決於您如何閱讀csv文件。理想情況下，數據存儲在陣列和看起來像這樣被讀取之後：

var data = 
[ 
    { 
     title: "Title 1", 
     subTitle: "SubTitle 1", 
     bars : 
     [ 
      { name: "bar1", value: "80%" }, 
      { name: "bar2", value: "40%" }, 
      { name: "bar3", value: "50%" }, 
      { name: "bar4", value: "60%" } 
     ], 
     total: "60%" 
    }, 
    { 
     title: "Title 2", 
     subTitle: "SubTitle 2", 
     bars : 
     [ 
      { name: "bar1", value: "80%" }, 
      { name: "bar2", value: "60%" }, 
      { name: "bar3", value: "40%" }, 
      { name: "bar4", value: "50%" } 
     ], 
     total: "80%" 
    } 
]; 

你遍歷段像這樣的列表：

data.foreach(function(item) { 
    ... 
}); 

但真正的問題是如何你要生成HTML嗎？用document.write（）？如果正在讀取的數據量是動態的，並且您正在創建HTML，那麼在創建HTML時將更容易設置屬性。

AngularJS將是一個更好的解決方案，使用ng-repeat。然後，您只能爲您的部分定義一次HTML。你談論讀取本地csv文件。這是否意味着這不是服務器託管的HTML文件？即便如此，仍然可以使用Angular與CDNs爲您託管文件。