플로트 - 누적 막대 위에 라벨을 표시합니다.

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

스택 usinjg 캔버스의 막대 맨 위에 레이블을 넣는 솔루션은 xPoint를 기준으로 xPoint를 계산해야한다는 것입니다. 스택 완료. 여기

코드 var에의 Y 좌표는 전체 스택을 값의 RESUME [을 사용

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

의 예입니다.