浮动条形图设计 [英] Flot Bar Chart design

问题描述

我已将此条形图 http://imageshack.com/a/img901 /7186/cnOfhh.png ，代码为：

I've made this bar chart http://imageshack.com/a/img901/7186/cnOfhh.png, and the code for it is:

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

和BarChart功能：

and the BarChart function:

function BarChart(id, data) {

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

问题是我无法设法得到这样的东西href =https://imageshack.us/i/expGGpOkp =nofollow> https://imageshack.us/i/expGGpOkp ，小行应该是 zdata [ I] .TargetTime 。我尝试过使用堆叠条形图的想法，但结果是不同的...我做错了什么？任何人都可以帮助我一个建议，从最后一张图像中获得相同的条形图？

The problem is that I can't manage to get something like this https://imageshack.us/i/expGGpOkp, the little line should be zdata[i].TargetTime. I've tried something using stacked bar chart idea but the result was way different... What am I doing wrong? Can anyone help me with a suggestion to start with to get the same bar chart like in the last image?

推荐答案

像您的第二张图片使用另一个条形码数据，其中条形码的开始和结束是相同的，从而将它们减少到行，您不需要堆叠任何条，只给它们正确的y值（小提琴）：

Here is something like your second picture using another bar dataseries where the start and end of the bars are the same thereby reducing them to lines, you don't need to stack any of the bars just give them the right y-values (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
        }
    });

});

这篇关于浮动条形图设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！