6

Flotを使用して、横棒グラフを積み上げ棒と混合することは可能ですか？

ここでのjqplotの質問に似ています：jqplot並べて積み上げ棒グラフ

両方を使用してみましたが、1つだけを並べて実行し、並べて無効にすると、スタックバーは完全に機能します。

画像は次のようになります：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 に答える