label - Flot - 在堆叠条的顶部显示标签

Question

我正在使用来自 this stackoverflow question 的代码片段标记我的浮点数据点。到目前为止，这对我很有帮助，但现在我必须标记堆叠条形的整体值。有两个数据系列，到目前为止我已经设法计算出总和，但我似乎无法为我的标签找到正确的定位。我想将它们放在堆栈的顶部，但 pointOffset 只给我基于非堆栈条的偏移量。

这是我目前使用的代码，它将标签放置在第二个系列的数据点所在的位置，如果条形没有堆叠，则将它们放在顶部条形的某个位置。

$.each(p.getData()[1].data, function(i, el){

    var series0 = p.getData()[0].data;
    sum = el[1] + series0[i][2]

    var o = p.pointOffset({x: el[0], y: el[1]});

    $('<div class="data-point-label">' + sum + '</div>').css( {
        position: 'absolute',
        left: o.left - 5,
        top: o.top ,
        display: 'none'
    }).appendTo(p.getPlaceholder()).fadeIn('slow');
});

编辑 #1:到目前为止，我已经尝试使用 c2p/p2c，使用单个数据点的最高值计算最高值，并在堆栈插件上找到更多文档。恐怕这些都对我没有多大帮助。

编辑 #2:我也试过 this stackoverflow answer 中给出的代码但这对我不起作用。我怀疑作者正在使用一些标签插件......

Answer 1

使用jg Canvas 将标签放在堆栈中条形顶部的解决方案是您必须计算完整堆栈中值总和的基数xPoint。

这是一个代码示例

var sumaArr = [];
for (var u = 0; u < p.getData().length; u++) {
    $.each(p.getData()[u].data, function (i, el) {
        sumaArr[i] > 0 ? sumaArr[i] = sumaArr[i] + el[1] : sumaArr[i] = el[1];
    });
}

var ctx = p.getCanvas().getContext("2d");
var data = p.getData()[p.getData().length - 1].data;
var xaxis = p.getXAxes()[0];
var yaxis = p.getYAxes()[0];
var offset = p.getPlotOffset();
ctx.font = "12px 'Segoe UI'";
ctx.fillStyle = "gray";
for (var i = 0; i < data.length; i++) {
    var text = sumaArr[i];
    var metrics = ctx.measureText(text);
    var xPos = (xaxis.p2c(data[i][0]) + offset.left) - metrics.width / 2;
    var yPos = yaxis.p2c(sumaArr[i]) + offset.top - 5;
    ctx.fillText(text, xPos, yPos);
}

var yPos 使用构成完整堆栈的值的总和。