漂亮的条形图设计

Question

我做了这个条形图http://imageshack.com/a/img901/7186/cnOfhh.png，它的代码是：

//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);
}

和条形图函数：

function BarChart(id, data) {

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

问题是我无法得到这样的东西https://imageshack.us/i/expGGpOkp，小线应该是zdata[i].TargetTime。我尝试过使用堆叠条形图的想法，但结果却大不相同……我做错了什么？谁能帮我提供一个建议，让我开始制作与上一张图片相同的条形图？

Answer 1

这是你的第二张图片，使用另一个条形数据系列，其中条形的开始和结束是相同的，从而将它们减少为线条，你不需要堆叠任何条形，只需给它们正确的 y -值（fiddle）：

$(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
        }
    });

});

漂亮的条形图设计

Flot Bar Chart design

javascript

flot

bar-chart