Question

我希望那里的某个人可以告诉我，如果我正在尝试做什么，甚至可以使用FLOT Javascript库。我试图用双轴和三个数据集显示图表（下图）。一个数据集位于左侧轴上，两个数据集位于右侧轴上。我真正希望能够做的是将两个数据集堆叠在右轴上，因为它们应该累积显示。到目前为止，我一直无法得到这个图表来响应堆栈：真正的设置。

如果有人能帮助我，我会非常感激。我的代码和当前图表的快照。我正在尝试堆叠对应于右轴（y2）的蓝色和绿色区域。

I am trying to stack the blue and green areas which correspond to the right axis (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

这非常简单。堆叠插件没有详细记录，但在source code中，您可以看到指定要打开堆叠的两种方法。

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

系列：{       stack：null或true或key（number / string）}

或为特定系列
指定
$。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/

Flot Graphs：双轴折线图，堆叠一个轴

1 个答案: