5

私がやろうとしていることがFLOTJavascriptライブラリでさえ可能かどうか、誰かが教えてくれることを願っています。2軸と3つのデータセットを含むグラフ（下）を表示しようとしています。1つのデータセットが左軸にあり、2つのデータセットが右軸にあります。私が本当にやりたいのは、2つのデータセットが累積的に表示されるはずなので、右軸にスタックすることです。これまでのところ、このチャートをスタックに応答させることができませんでした。真の設定です。

誰かがそれを手伝ってくれるなら、私はそれを大いに感謝します。私のコードと現在のチャートのスナップショット。右軸（y2）に対応する青と緑の領域を積み重ねようとしています。

右軸（y2）に対応する青と緑の領域を積み重ねようとしています

$(function () {
var previousPoint;

var completes = [[1346954400000, 5], [1346997600000, 5], [1347040800000, 7], [1347084000000, 9], [1347127200000, 12], [1347170400000, 15], [1347213600000, 16], [1347256800000, 20], [1347300000000, 20], [1347343200000, 20], [1347386400000, 25]];
var holds = [[1346954400000, 2], [1346997600000, 2], [1347040800000, 6], [1347084000000, 12], [1347127200000, 12], [1347170400000, 15], [1347213600000, 24], [1347256800000, 24], [1347300000000, 24], [1347343200000, 24], [1347386400000, 25]];
var screeners = [[1346954400000, 10298], [1346997600000, 7624], [1347040800000, 5499], [1347084000000, 2100], [1347127200000, 8075], [1347170400000, 4298], [1347213600000, 1134], [1347256800000, 507], [1347300000000, 0], [1347343200000, 800], [1347386400000, 120]];




var ds = new Array();

ds.push({
    data:completes,
    label: "Complete",
    yaxis: 2,
    lines: {
        show: true, 
        fill: true, 
        order: 2,
    }
});
ds.push({
    data:screeners,
    label: "Pre-Screened",
    yaxis: 1,
    lines: {
        show: true, 
        fill: true, 
        order: 1,
    }
});
ds.push({
    data:holds,
    label: "Holds",
    yaxis: 2,
    lines: {
        show: true, 
        fill: true, 
        order: 3,
    }
});

//tooltip function
function showTooltip(x, y, contents, areAbsoluteXY) {
    var rootElt = 'body';

    $('<div id="tooltip2" class="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y - 35,
        left: x - 5,
        border: '1px solid #000',
        padding: '1px 5px',
        'z-index': '9999',
        'background-color': '#202020',
        'color': '#fff',
        'font-size': '11px',
        opacity: 0.8
    }).prependTo(rootElt).show();
}

//Display graph
$.plot($("#placeholder1"), ds, {
    grid:{
        hoverable:true
    },
    xaxes: [ { mode: 'time', twelveHourClock: true, timeformat: "%m/%d %H:%M" } ],
    yaxes: [ {  min: 0,
                tickFormatter: function numberWithCommas(x) 
                {
                    return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
                },
             } 
            ],
    y2axis: [ ],
    legend: { show: true }
});

}）;

4

1 に答える 1

5

This is very straightforward. The stacking plugin isn't well documented, but in the source code, you can see there are two ways to specify that you want stacking turned on.

Two or more series are stacked when their "stack" attribute is set to the same key (which can be any number or string or just "true"). To specify the default stack, you can set

series: { stack: null or true or key (number/string) }

or specify it for a specific series

$.plot($("#placeholder"), [{ data: [ ... ], stack: true }])

In this case, we want to specify it within the two series objects that we want stacked, which would look like this:

ds.push({
    data:completes,
    label: "Complete",
    yaxis: 2,
    stack: true,  //added
    lines: {
        show: true, 
        fill: true, 
        order: 2,
    }
});
ds.push({
    data:screeners,
    label: "Pre-Screened",
    yaxis: 1,
    lines: {
        show: true, 
        fill: true, 
        order: 1,
    }
});
ds.push({
    data:holds,
    label: "Holds",
    yaxis: 2,
    stack: true,  //added
    lines: {
        show: true, 
        fill: true, 
        order: 3,
    }
});

これらの2ビットを追加stack:trueし、スタックプラグインをjavascriptソースに含めると、それが実行されます。ここで実際の動作を確認してください：http： //jsfiddle.net/ryleyb/zNXBd/

于 2012-10-12T15:30:16.713 に答える