Question

是否可以使用Flot将并排条形图与堆积条混合使用？

类似于jqplot问题：jqplot Side by Side Stacked Bar Chart

尝试使用两者并但只有一个并排运行，如果我并排禁用，堆叠的栏可以很好地工作。

图片类似于：http://peltiertech.com/Utility/pix/clusterstackchart.png

我写的示例代码是：http://jsfiddle.net/WAGbt/（注释顺序：X属性，你会看到它们切换）

$(document).ready(function ()
{
    DrawChart();
});

function GenerateSeries(added)
{
    var data = [];
    var start = 100 + added;
    var end = 500 + added;

    for (i = 1; i <= 20; i++)
    {
        var d = Math.floor(Math.random() * (end - start + 1) + start);
        data.push([i, d]);
        start++;
        end++;
    }

    return data;
}

function DrawChart()
{
    var dataa = GenerateSeries(100);
    var datab = GenerateSeries(100);
    var datac = GenerateSeries(100);

    var ds = new Array();

    var data =
    [
        {
            label: "data1",
            data: dataa,
            bars:
            {
                show: true,
                barWidth: 0.2,
                order: 1,
                lineWidth: 2
            }
        },
        {
            label: "data2",
            data: datab,
            bars:
            {
                show: true,
                barWidth: 0.2,
                order: 2,
                lineWidth: 2
            }
        },
        {
            label: "data3",
            data: datac,
            bars:
            {
                show: true,
                barWidth: 0.2,
                order: 3,
                lineWidth: 2
            }
        }
    ];

    var options = {
        series: {
            stack: true
        },
        xaxis: {
        },
        grid: {
            backgroundColor: { colors: ["#FFF", "#FFF"] }
        }
    };

    var plot = $.plot($("#placeholder"), data, options);
}

Answer 1

将bars添加到选项...

var options = {
    series: {
        stack: true
    },
    xaxis: {
    },
    grid: {
        backgroundColor: { colors: ["#FFF", "#FFF"] }
    },
    bars:{ // show the bars with a width of .4
        show: true,
        barWidth: .4
    }

};

按摩数据到这种格式...

var data = [ // all series

    [ // first series (Q1)
        [0,100], // pens Q1 N America
        [0.4,120], // pencils Q1 N America
        [1,130], // pens Q1 Europe
        [1.4,140], // pencils Q1 Europe
        [2,150], // pens Q1 Asia
        [2.4,200], // pencils Q1 Asia
    ],

    [ // second series (Q2)
        [0,100],
        [0.4,200],
        [1,200],
        [1.4,200],
        [2,200],
        [2.4,200],
    ],

    [ // third series (Q3)
        [0,100],
        [0.4,200],
        [1,200],
        [1.4,200],
        [2,200],
        [2.4,200],
    ],

    [ // fourth series (Q4)
        [0,100],
        [0.4,200],
        [1,200],
        [1.4,200],
        [2,200],
        [2.4,200],
    ]

]

它的工作原理如下：http://jsfiddle.net/WAGbt/2/

我使用该系列的标签和轴上进行了另一次更新：http://jsfiddle.net/WAGbt/3/

并排堆叠棒

1 个答案: