简体   繁体   English

在一张图中绘制多个堆叠的序列

[英]Flot multiple stacked series in one chart

Is it possible to have two separate data variables to be stacked separately on the same chart? 是否可以将两个单独的数据变量分别堆叠在同一张图表上? So for example, my first data variable has 3 stacked series in it and my second data variable has 2 different stacked series in it. 因此,例如,我的第一个数据变量具有3个堆叠序列,而我的第二个数据变量具有2个不同的堆叠序列。 Can I have both of them in the same chart, but stacked independently? 我可以将它们放在同一张图表中,但独立堆叠吗?

Not sure I completely understand, but if you want two groups of stacks, just separate them out on the x-axis: 不确定我是否完全理解,但是如果您要两组堆栈,只需将它们在x轴上分开即可:

    var d1 = [];
    for (var i = 0; i <= 10; i += 1) {
        d1.push([i, parseInt(Math.random() * 30)]);
    }

    var d2 = [];
    for (i = 0; i <= 10; i += 1) {
        d2.push([i, parseInt(Math.random() * 30)]);
    }

    var d3 = [];
    for (i = 0; i <= 10; i += 1) {
        d3.push([i, parseInt(Math.random() * 30)]);
    }

    // d1, d2, d3 run 0 to 10
    // d4, d5, 12 to 20

    var d4 = [];
    for (i = 12; i <= 20; i += 1) {
        d4.push([i, parseInt(Math.random() * 30)]);
    }       

    var d5 = [];
    for (i = 12; i <= 20; i += 1) {
        d5.push([i, parseInt(Math.random() * 30)]);
    }

Produces (example here ): 产生( 此处为示例):

在此处输入图片说明

EDIT FOR COMMENTS 编辑评论

If you want to stack some series in the positive direction and others in the negative, provide a unique stack variable value for each stack group. 如果要按正方向堆叠某些序列,而按负方向堆叠其他序列,请为每个堆叠组提供唯一的stack变量值。

    var d1 = [];
    for (var i = 0; i <= 10; i += 1) {
        d1.push([i, parseInt(Math.random() * 30)]);
    }
    d1 = {data: d1, stack: 1}; // specifiy a unique stack for pos

    var d2 = [];
    for (i = 0; i <= 10; i += 1) {
        d2.push([i, parseInt(Math.random() * 30)]);
    }
    d2 = {data: d2, stack: 1}; // specifiy a unique stack for pos

    var d3 = [];
    for (i = 0; i <= 10; i += 1) {
        d3.push([i, parseInt(Math.random() * 30)]);
    }
    d3 = {data: d3, stack: 1}; // specifiy a unique stack for pos

    var d4 = [];
    for (i = 0; i <= 10; i += 1) {
        d4.push([i, parseInt(-Math.random() * 30)]);
    }
    d4 = {data: d4, stack: 2}; // specifiy a unique stack for neg


    var d5 = [];
    for (i = 0; i <= 10; i += 1) {
        d5.push([i, parseInt(-Math.random() * 30)]);
    }
    d5 = {data: d5, stack: 2}; // specifiy a unique stack for neg

Updated example . 更新示例

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM