jQuery Flot Chart為每個系列添加標簽

Question

我正在使用http://www.flotcharts.org/庫繪制2個相連的系列。 我可以成功創建Graph，您可以在下面看到我的JSFIDDLE。

要做：問題是我想在每個系列的頂部中心添加一個標簽。 我想以這樣一種方式添加標簽：如果調整圖的大小，它將保持在系列的頂部中心。 我怎樣才能做到這一點 ？

圖片：

JSFIDDLE： http : //jsfiddle.net/bababalcksheep/ktZ5X/2/

HTML / CSS：

html，正文{高度：100％； }

JS：

var options = {
    series: {
        lines:  { show: true,lineWidth: 2,fill: true},
        points: { show: true,radius: 3,lineWidth: 1},
        shadowSize: 2
    },
    legend: { show: false}
};

var DATA = [{
    "label": "Group-1",
        "data": [
        [0.25, 0.25],
        [0.5, 0.5],
        [0.875, 0.875],
        [1, 1]
    ]
}, {
    "label": "Group-2",
        "data": [
        [1, 0.5],
        [1.25, 0.25],
        [1.5, 0.5],
        [1.88, 0.875],
        [2, 1]
    ]
}];
var plot = $.plot("#placeholder", DATA, options);

Answer 1

我同意@iLikePrograms，將其添加到掛接事件中是最好的方法。 這是最新的小提琴 。

在您的選項中添加：

hooks: { drawSeries : [addLabel] }

其中addLabel函數為：

addLabel = function(plot, ctx, series){
    var xaxis = series.xaxis;
    var yaxis = series.yaxis;
    // space midway on series
    var x = (series.data[series.data.length-1][0] + series.data[0][0])/2;
    // just below top of plot
    var y = yaxis.max - (yaxis.tickSize / 2);
    ctx.font = "16px 'Segoe UI'";
    ctx.fillStyle = "black";
    var text = series.label;
    ctx.fillText(text, xaxis.p2c(x), yaxis.p2c(y)); // add the label
} 

Answer 2

您可以為此使用注釋插件。 請參見此更新的小提琴 。

新選項：

    comment: {
        show: true
    },
    comments: [{
        x: 0.625,
        y: 1,
        contents: "Group-1"
    }, {
        x: 1.5,
        y: 1,
        contents: "Group-2"
    }]