Javascript Flot条形图设计

我制作了这个条形图，代码是：

//compute & mark average color
for (var i = 0; i < zdata.length; i++) {
    if (zdata[i].TargetTime == null) zdata[i].TargetTime = 0;
    if (zdata[i].TimePlayed == null) zdata[i].TimePlayed = 0;

    if (zdata[i].TargetTime >= zdata[i].TimePlayed) {
        zdata[i]['Color'] = 'green';
    } else {
        zdata[i]['Color'] = 'red';
    }
}
//localsitelist
var element = {
    rt: 'D',
    Id: rid,
    courselist: clist,
    selcourseId: selCid,
    selcourse: selCname,
    cartlist: wData,
    selSiteId: lsid,
    selsite: sitename,
    dataList: zdata
}; //, carts: _mVM.availableCarts()}; //
//if rid exists, is update, else its new
var found = -1;
for (var k = 0; k < document.pvm.rapArray().length; k++) {
    if (document.pvm.rapArray()[k].Id() == rid) {
        document.pvm.rapArray()[k].update(element);
        //build chart data
        var values = []; //, series = Math.floor(Math.random() * 6) + 6;

        for (var i = 0; i < zdata.length; i++) {
            values[i] = {
                data: [
                    [zdata[i].HoleSequence, zdata[i].TimePlayed]
                ],
                color: zdata[i].Color
            };
        }
        //var data = [{ data: [[0, 1]], color: "red" },  { data: [[1, 2]], color: "yellow" },{ data: [[2, 3]], color: "green" }];
        BarChart('#ChartD-Overview' + rid, values);
        found = 1;
        break;
    }
}
if (found == -1) {
    var rvm = new panelViewModel(element);
    document.pvm.rapArray.push(rvm);
    //build chart data
    var values = []; //, series = Math.floor(Math.random() * 6) + 6;

    for (var i = 0; i < zdata.length; i++) {
        values[i] = {
            data: [
                [zdata[i].HoleSequence, zdata[i].TimePlayed]
            ],
            color: zdata[i].Color
        };
    }
    BarChart('#ChartD-Overview' + rvm.Id(), values);
}

---

问题是我无法获得这样的内容，小行应该是

zdata[I].TargetTime

。我尝试了一些使用堆叠条形图的想法，但结果是完全不同的。。。我做错了什么？有谁能帮我提一个建议，让我从上一张图片中的条形图开始吗？

这里有一些类似于您的第二张图片，使用另一个条形图数据系列，其中条形图的起点和终点相同，从而将它们减少为直线，您不需要堆叠任何条形图，只需给它们正确的y值（）：

function BarChart(id, data) {

    $.plot(id, data, {
        series: {
            bars: {
                show: true,
                barWidth: 0.6,
                align: "center"
            }
        },
        stack: true,
        xaxis: {
            mode: "categories",
            tickLength: 0
        }
    });
}

$(function () {

    var dataBarsRed = {
        data: [
            [2, 3], ],
        label: 'Bars in Red',
        color: 'red'
    };
    var dataBarsGreen = {
        data: [
            [1, 2],
            [3, 1],
            [4, 3]
        ],
        label: 'Bars in Green',
        color: 'green'
    };
    var dataLines = {
        data: [
            [1, 3, 3],
            [2, 3.5, 3.5],
            [3, 1.5, 1.5],
            [4, 2.5, 2.5]
        ],
        label: 'Lines',
        color: 'navy',
        bars: {
            barWidth: 0.5
        }
    };

    var plot = $.plot("#placeholder", [dataBarsRed, dataBarsGreen, dataLines], {
        points: {
            show: false
        },
        lines: {
            show: false
        },
        bars: {
            show: true,
            align: 'center',
            barWidth: 0.6
        },
        grid: {
            hoverable: true,
            autoHighlight: true
        },
        xaxis: {
            min: 0,
            max: 5
        },
        yaxis: {
            min: 0,
            max: 5
        }
    });

});