javascript - Flot Graphs：双轴折线图，单轴叠加

Question

我希望有人可以告诉我，我想要做的事情是否可以使用 FLOT Javascript 库。我试图展示一个带有双轴和三个数据集的图表（下图）。一个数据集在左轴上，两个数据集在右轴上。我真正想做的是将两个数据集堆叠在右轴上，因为它们应该累积显示。到目前为止，我一直无法让这个图表响应堆栈：真正的设置。

如果有人能帮我解决这个问题，我将不胜感激。我的代码和当前图表的快照。我正在尝试堆叠对应于右轴（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 }
});  

});

Answer 1

这非常简单。堆叠插件没有很好的文档记录，但是在源代码中，您可以看到有两种方法可以指定您想要打开堆叠。

当两个或多个系列的“stack”属性设置为相同的键（可以是任何数字或字符串或只是“true”）时，它们会被堆叠。要指定默认堆栈，您可以设置

系列：{堆栈：null或true或键（数字/字符串）}

或为特定系列指定它

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

在这种情况下，我们希望在要堆叠的两个系列对象中指定它，如下所示：

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,
    }
});

添加这两个stack:true位并将堆栈插件包含到您的 javascript 源中，这样就可以了。在此处查看实际操作：http: //jsfiddle.net/ryleyb/zNXBd/