javascript - 曲线图: Dual axis line chart,堆叠一轴

我希望外面有人可以告诉我，即使尝试使用FLOT Javascript库也可以做到。我正在尝试显示一个具有双轴和三个数据集的图表(如下)。一个数据集在左轴上，而两个数据集在右轴上。我真正想要做的是将两个数据集堆叠在右轴上，因为它们应该累积显示。到目前为止，我一直无法获得该图表来响应堆栈:完全为true设置。

如果有人可以帮助我，我将非常感激。我的代码和当前图表的快照。我正在尝试堆叠与右轴(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 }
});

});

最佳答案

这很简单。堆栈插件没有很好的文档说明，但是在source code中，您可以看到有两种方法可以指定要打开的堆栈。



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

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/

关于javascript - 曲线图: Dual axis line chart,堆叠一轴，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12859916/