循环遍历数据并从csv文件加载数据
Loop through data and load data from csv file
我很难遍历这两组数据。有了1组数据,它就可以工作了,但现在我想添加更多的3或4组数据。此外,我想从本地csv文件加载数据,我将上传和更新数据,我将保存文件并覆盖它。http://jsfiddle.net/kmc3ohab/7/
var data = {
"box1": {
"bar1": "80%",
"bar2": "60%",
"bar3": "40%",
"bar4": "50%",
"total": "60%",
},
"box2": {
"bar1": "80%",
"bar2": "60%",
"bar3": "40%",
"bar4": "50%",
"total": "80%",
},
};
$(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;
});
});
body {
background: #efefef;
width: 100%;
margin: 0px;
text-align: center;
}
h2 {
font-family: 'Noto Sans', serif;
color: #b71f38;
font-weight: 300;
margin: 0px;
}
h3 {
font-family: 'Noto Sans', serif;
color: #444444;
font-weight: 200;
margin: 0px;
}
#colLeft {
width: 50%;
float: left;
}
#colRight {
width: 50%;
float: right;
}
#row {
background: #e2e2e2;
width: auto;
height: 230px;
margin: 15px;
border-radius: 5px;
}
#insideColLeft {
width: 30%;
float: left;
}
#insideColRight {
width: 69%;
float: right;
padding-top: 8px;
padding-right: 5px;
}
.circle {
margin-left: auto;
margin-right: auto;
border-radius: 50%;
width: 150px;
position: relative;
background: #b71f38;
}
.circle:before {
content: "";
display: block;
padding-top: 100%;
}
.circle-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
.score-text {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 1em;
line-height: 1em;
font-size: 30px;
font-family: 'Fjalla One', sans-serif;
color: #ffffff;
}
.date {
font-family: 'Fjalla One', sans-serif;
text-align: center;
color: #333333;
}
ul.graph {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.graph li {
margin: 10px;
height: 25px;
background: #ccc;
color: #fff;
}
ul.graph li.data {
background: #f4ebb8;
}
<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>
<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>
您必须注意document-ready-function中的box-index。在你的代码中有一个固定的"box1",但是。data的索引将上升到7。因此,将索引除以4,然后可以计算框索引。您还必须循环遍历score-text元素。
$(document).ready(function() {
$(".score-text").each(function( index, value ) {
value.innerText = data['box'+(index+1)].total;
});
$(".data").each(function( index, value ) {
var boxIndex = Math.floor(index/4);
width = data['box'+(boxIndex+1)]['bar'+(index+1-boxIndex*4)];
value.innerText = width;
value.style.width = width;
});
});
我也更新了你的例子。http://jsfiddle.net/kmc3ohab/11/
相关文章:
- 如何使用.log数据文件显示EXT-js网格
- 如何在javascript中使用会话特定的数据文件
- 数据文件出现 D3 错误
- HTML 对象数据文件(如果未找到)
- 在 JSFiddle 中链接外部 JSON 数据文件
- 如何从 SDK 插件数据文件夹加载 DLL
- 使用 jquery 从 json 数据文件动态填充选择元素
- 节点模块包括数据文件作为全局变量
- 如何获取 HTML 标记的“数据文件”属性的内容
- 在 d3.js 散点文件中使用数据数组而不是外部数据文件
- 我用PHP调用的数据文件神秘地被更改了.用户是否覆盖了它
- 从数据文件导入数组
- 谷歌驱动器API应用程序数据文件夹,是真的那么困难
- XML数据文件已更改,但更改不会;t出现在gmaps中的html页面上
- 大文件(超过~2Mb)上传-引发错误“;键'数据文件'在<MultiValueDict:{}>
- 将数据文件转换为blob
- 如何使用链接检索整个数据文件(ajax?)
- firefox(9),javascript,由于大数据文件导致分配大小溢出.有什么办法可以避免这种情况吗
- 我们可以在json数据文件中添加图像,并使用D3.js在页面上调用它
- IANA (Internet Assigned Numbers Authority)数据文件和来自www.timeand