Jquery 使用SPservices创建条形图，但它显示颠倒

对于你们中的一些人来说，这听起来可能是一个非常简单的问题，但我是一个非常新的编程人员。我正在使用SPServices GetListItems从SharePoint列表中提取数据。这是js：

$(document).ready(function () {
var colors = ["#5179D6", "#66CC66", "#EF2F41", "#FFC700", "#61BDF2", "#FF7900",  "#7588DD", "#2F5E8C", "#07BACE", "#BAE55C", "#BA1871", "#FFFFCC",   "#BDE6FC", "#C7C7C7", "#ADA8FF", "#2FA675"];
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Test",
    CAMLViewFields: "<ViewFields><FieldRef Name='Person' /><FieldRef Name='Age' /><FieldRef Name='Earnings' /><FieldRef Name='Names' /></ViewFields>",
    completefunc: function (xData, Status) {
        $(xData.responseXML).SPFilterNode("z:row").each(function () {
            var theheight = $(this).attr("ows_Earnings") + 'px';
            var barras = '<div class="barras" style="height:' + theheight + '">' + $(this).attr("ows_Names") + '</div>';
            $('#graficos').append(barras);
            ////////


            $('.barras').each(function (idx) {
                $(this).css({ 'background': colors[idx % 16] });
            });
            });
    } //end of completeFunc

}); //end of SPServices
}); //end of jQuery function

$（文档）.ready（函数（）{
var colors=[“#5179D6”、“#66CC66”、“#EF2F41”、“#FFC700”、“#61BDF2”、“#FF7900”、“#7588DD”、“#2F5E8C”、“#07BACE”、“#BAE55C”、“#BA1871”、“#FFFFCC”、“#BDE7C”、ťADAC7;；
$（）.SPServices({
操作：“GetListItems”，
async:false，
列表名：“测试”，
CAMLViewFields:“”，
completefunc：函数（扩展数据、状态）{
$（扩展数据.responseXML）.SPFilterNode（“z:row”）.each（函数（）{
var theheight=$（this）.attr（“ows_收益”）+“px”；
var barras='+$（this.attr（“ows_名称”）+'；
$（#graficos'）。附加（barras）；
////////
$（'.barras'）。每个（函数（idx）{
$（this.css（{'background'：colors[idx%16]}）；
});
});
}//completeFunc结束
})；//SPServices的结束
}); //jQuery函数结束

这是HTML：

<div id="graficos" style="height:500px"></div>

我可以毫无问题地提取数据并创建条形图。我遇到的问题是，这些条看起来“倒置”：

---

我希望“扁平”部分位于底部。如果这看起来像是一个没有受过教育的问题（事实的确如此！），我很抱歉，但我还没有弄明白。谢谢

由于您知道每个div的确切高度，您可以使用边距进行调整：

”

此处的概念证明：

---

重要！在html中，id是唯一的，所以您不应该创建id为“barras”的多个元素。

看起来像是CSS唯一的问题。如果您将

#graficos

元素包装到另一个div中，那么您为什么要迭代一个元素<代码>巴拉斯只是一个分区。编辑：我知道你在那里做了什么。但是同样，您可以使用

barras.css（'color'，colors[i]）

，其中：

colors

必须在

spspsfilternode

循环之外声明，

i

也必须在循环之外声明，并在循环内部递增。谢谢！我听了你的建议，但是。。。仍然是倒挂的。我为你忙得不可开交，找到了[这个]（事后证明，你需要垂直对齐一个div，除非你有所有的高度，否则你不能这样做。作为旁注，你总是可以有一个

maxHeight

，每个div的最大高度值，每个div都有一个包装，比如

。我想试着为你的手制作一把小提琴，但它也不起作用。这是真是疯了！我将要从高度改为宽度，然后用divs或UL将它们一个接一个地贴在另一个上面，这不是我想要的，但我无法理解。@cubangy我编辑了答案并添加了一个概念证明，外加一个关于您原始代码问题的注释。谢谢Christophe。我今天早上确实注意到了id问题，我在我的代码中修复了它，但忘了在这里更改。我下周回到办公室后会尝试一下你的概念。Thansk！它工作得很好。我只是对你的代码做了一个很小的修改：`var barras='+$（this）.attr（“ows_Names”）+'`