Flot - 在堆積條上顯示標籤

Question

我使用this stackoverflow question的代碼段來標記我的flot數據點。到目前爲止，這給了我很好的幫助，但現在我必須標註堆疊酒吧的總體價值。有兩個數據系列，到目前爲止我已經設法計算總和，但似乎無法爲我的標籤找到合適的位置。我想將它們放在堆棧頂部，但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

解決方案將標籤放在棧usinjg畫布的頂部，是您必須計算基於x完整的堆棧。

這裏是代碼

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使用，使整個堆棧內的值的廟一個例子。