4

我正在使用这个 stackoverflow 问题中的代码片段来标记我的浮点数据点。到目前为止，这对我很有帮助，但现在我必须标记堆叠条的整体值。有两个数据系列，到目前为止，我已经设法计算了总和，但我似乎无法为我的标签制定正确的定位。我想把它们放在堆栈的顶部，但是 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：我也尝试过这个stackoverflow答案中给出的代码，但它对我不起作用。我怀疑作者正在使用一些标签插件...

4

1 回答 1

0

使用injg画布将标签放在堆栈条顶部的解决方案是，您必须根据整个堆栈中的值的总和计算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 使用构成完整堆栈的值的总和。

于 2016-01-18T15:45:41.320 回答