使用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 { 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> 

如果我有多个数据集怎么办？ 我该如何循环遍历每个数据？ 另外，如果我需要从本地的csv文件加载数据。 js小提琴更新了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。 将解决方案扩展到：

• 循环执行所有操作。 注意：如果将条形值存储在数组中会更好，那么您就不需要使用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时更容易设置属性。

使用ng-repeat，AngularJS将是更好的解决方案。 然后，您只需为部分定义HTML。 您谈论的是读取本地csv文件。 这是否意味着这不是服务器托管的HTML文件？ 即使这样，仍然可以将Angular与为您托管文件的CDN一起使用。