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

Question

对于你们中的一些人来说，这可能听起来像一个非常简单的问题，但我是一个非常新的编程。我正在使用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

这是HTML：

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

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

我希望“平坦”部分位于底部。如果这看起来像一个没有受过教育的问题（这是！），我道歉，但我无法弄明白。谢谢！

Answer 1

如您所知，每个div的确切高度，您可以调整边距：

'<div class="barras" style="height:' + theheight + 'px; margin-top:' + (500-theheight) + 'px;">'

这里的概念证明：http://jsfiddle.net/EGCyU/

重要！在html中，id是唯一的，因此你不应该使用id＆＃34; barras＆＃34;创建多个元素。