jQuery flot - 显示之前在线图上的百分比变化

Question

我有一个使用flot显示的折线图。我想在每个点上方显示从前一点开始的百分比变化。我查看了文档，我无法看到任何表明这是可能的。有可能吗？

Answer 1

虽然flot确实有point labeling plugin，但我觉得label the points yourself更容易。这是一个快速的代码片段，它将标记从最后一点开始的百分比变化：

var series = [{data: [[0, 1.2], [1, 3], [2, 9.2], [3, 10]]},
              {data: [[0, 6], [1, 7], [2, 13], [3, 17]]}]                  

somePlot = $.plot("#placeholder", series, {xaxis:{min:-0.2, max:3.2}});

var ctx = somePlot.getCanvas().getContext("2d");
mySeries = somePlot.getData();
var xaxis = somePlot.getXAxes()[0];
var yaxis = somePlot.getYAxes()[0];
var offset = somePlot.getPlotOffset();
ctx.font = "13px 'Segoe UI'";
ctx.fillStyle = "black";
for (var i = 0; i < mySeries.length; i++){
    for (var j = 0; j < mySeries[i].data.length; j++){
        if (j == 0) continue;
        var x = mySeries[i].data[j][0];
        var y = mySeries[i].data[j][3];
        var lastY = mySeries[i].data[j-1][4];
        var text = (((y - lastY) / lastY) * 100).toFixed(1) + '%'
        var metrics = ctx.measureText(text);
        var xPos = (xaxis.p2c(x)+offset.left) - metrics.width/2;
        var yPos = yaxis.p2c(y) + offset.top - 5;
        ctx.fillText(text, xPos, yPos);
    }
}

小提琴here。

结果：