6

是否可以使用 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);
}
4

1 回答 1

5

添加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/

于 2013-02-20T13:24:31.387 回答