浮动数据标签
我试图使用Flot生成折线图，但是我希望数据标签显示在图表上 – 也就是说，我希望每个点的值都显示在该点旁边。 我觉得这应该是一个选项，但无法在API中find它。 我只是想念一些东西，还是有人知道一个解决方法？
提前致谢。
以下是我添加的function，包括一个愉快的animation效果：
var p = $.plot(...); $.each(p.getData()[0].data, function(i, el){ var o = p.pointOffset({x: el[0], y: el[1]}); $('<div class="data-point-label">' + el[1] + '</div>').css( { position: 'absolute', left: o.left + 4, top: o.top - 43, display: 'none' }).appendTo(p.getPlaceholder()).fadeIn('slow'); }); 您可以移动位置并将CSS显示到样式表。
您需要的function在Flot Google组中请求。 它看起来并没有实现过（API中没有任何关于在图表中放置任何标签的内容）。 我认为你的问题的答案是，不，目前不可能在图表中的某些行上显示某些值。
Flot首席开发人员Ole Larson提到，在图表中显示标签与FLot上的其他标签不同，他们将不得不考虑如何扩展API /绘图参数才能做到这一点。
也就是说，你可能想在Flot论坛上发布一个问题，或者就新function的bug跟踪器提出build议。 奥莱·拉森（Ole Larson）其实很擅长回答所有的问题，错误和build议。
如果其他人正在寻找一个快速的解决scheme，请看这个插件：
看起来flot-valuelabels插件是以前的flot插件的一个分支，但分叉的代码在canvas上呈现标签。 你可以在插件的Github wiki页面上看到这个样子的样子（看起来相当令人满意）。
function redrawplot() { $('.tt1').remove(); var points = plot.getData(); var graphx = $('#placeholder').offset().left; graphx = graphx + 30; // replace with offset of canvas on graph var graphy = $('#placeholder').offset().top; graphy = graphy + 10; // how low you want the label to hang underneath the point for(var k = 0; k < points.length; k++){ for(var m = 1; m < points[k].data.length-1; m++){ if(points[k].data[m][0] != null && points[k].data[m][1] != null){ if ((points[k].data[m-1][1] < points[k].data[m][1] && points[k].data[m][1] > points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] < -50 || points[k].data[m][1] - points[k].data[m+1][1] > 50)) { showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) - 35,points[k].data[m][1], points[k].color); } if ((points[k].data[m-1][1] > points[k].data[m][1] && points[k].data[m][1] < points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] > 50 || points[k].data[m][1] - points[k].data[m+1][1] < -50)) { showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) + 2,points[k].data[m][1], points[k].color); } } } } } function showTooltip1(x,y,contents, colour){ $('<div class=tt1 id="value">' + contents + '</div>').css( { position: 'absolute', display: 'none', top: y, left: x, 'border-style': 'solid', 'border-width': '2px', 'border-color': colour, 'border-radius': '5px', 'background-color': '#ffffff', color: '#262626', padding: '0px', opacity: '1' }).appendTo("body").fadeIn(200); }
