javascript - jQuery Flot Chart 为每个系列添加标签

标签 javascript jquery graph flot

我正在使用http://www.flotcharts.org/库绘制 2 个相连的系列。 我可以成功创建Graph,你可以在下面看到我的JSFIDDLE。

待办事项: 问题是我想在每个系列的顶部中心添加一个标签。 我想以这样的方式添加标签,如果调整图形大小,它会保持在系列的顶部中心。 我怎样才能做到这一点 ?

图像:

enter image description here

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

HTML/CSS:

html, body {height: 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);

最佳答案

我同意 @iLikePrograms 将其添加到 Hook 事件中是最好的方法。这是更新的fiddle .

在您的选项中添加:

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
} 

关于javascript - jQuery Flot Chart 为每个系列添加标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23832740/

相关文章:

javascript - 是否保证在 webpack 或 rollup 模块打包过程中保留单例?

python - igraph的gomory_hu_tree计算最小割树吗?

javascript - Jquery $.get 无法访问

javascript - 当值由该站点中的 javascript 设置时如何从外部网站获取值

algorithm - 根据 s 和 t 顶点之间的最小切割将图分成两部分

algorithm - 列表性能优化

javascript - 如何使用 AngularJS $templateCache.get()?

javascript - 将函数作为参数传递给子组件 polymer 3

javascript - 为什么使用 push 或任何数组方法修改原始数组但将其分配给其他东西却没有?

javascript - 查询。单击后如何删除按钮?