使用JQuery Flot在2个柱之间设置空间

Question

如何设置2个小节之间的空格？我想要每个月并排2个酒吧。

Javascript代码

var data3 = [
    [gd(2014, 1, 1), 800], [gd(2014, 2, 2), 500], [gd(2014, 3, 3), 600], [gd(2014, 4, 4), 700],
    [gd(2014, 5, 5), 500], [gd(2014, 6, 6), 456], [gd(2014, 7, 7), 800], [gd(2014, 8, 8), 589],
    [gd(2014, 9, 9), 467], [gd(2014, 10, 10), 876], [gd(2014, 11, 11), 689], [gd(2014, 12, 12), 700]
];

    var data2 = [
        [gd(2014, 1, 1), 700], [gd(2014, 2, 2), 300], [gd(2014, 3, 3), 400], [gd(2014, 4, 4), 200],
        [gd(2014, 5, 5), 200], [gd(2014, 6, 6), 100], [gd(2014, 7, 7), 500], [gd(2014, 8, 8), 400],
        [gd(2014, 9, 9), 300], [gd(2014, 10, 10), 400], [gd(2014, 11, 11), 200], [gd(2014, 12, 12), 300]
    ];       

    var dataset = [
        {
            label: "Receber",
            data: data3,
            color: "#1ab394",
            bars: {
                show: true,
                align: "center",
                barWidth: 999999999,
                lineWidth: 1
            }
        },
        {
            label: "Pagar",
            data: data2,
            color: "#464f88",
            bars: {
                lineWidth: 1,
                show: true,
                fill: true,
                barWidth: 999999999
            },
        }
    ];
var options = {
            xaxis: {
                mode: "time",
                tickSize: [1, "month"],
                tickLength: 0,
                axisLabel: "Date",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 10,
                color: "#838383",                
                timeformat: "%b/%y"
            },
            yaxes: [{
                position: "left",
                max: 1070,
                color: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 3
            }, {
                position: "right",
                clolor: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: ' Arial',
                axisLabelPadding: 67
            }
            ],
            legend: {
                noColumns: 1,
                labelBoxBorderColor: "#000000",
                position: "nw"
            },
            grid: {
                hoverable: true, // Usa o plugin "jquery.flot.tooltip" para quando passar o mouse sob os pontos do grafico
                borderWidth: 0,
                color: '#838383',
                clickable: true

            },
            tooltip: true
        };

function gd(year, month, day) {
            return new Date(year, month - 1, day).getTime();
        }

我的图表

Answer 1

你看过flot.orderbars插件了吗？它允许您通过向order属性添加bars属性来订购条形图，从而将条形图放在一起：

var dataset = [{
    label: "Receber",
    data: data3,
    color: "#1ab394",
    bars: {
        show: true,
        lineWidth: 1,
        barWidth: 60 * 60 * 24 * 1000 * 7, //set the barWidth to 7 days
        order: 1
    }
}, {
    label: "Pagar",
    data: data2,
    color: "#464f88",
    bars: {
        show: true,
        lineWidth: 1,
        barWidth: 60 * 60 * 24 * 1000 * 7,
        order: 2
    },
}];

我已经使用您的代码和订单栏插件创建了一个示例JSFiddle。