【发布时间】：2009-07-23 20:33:02
【问题描述】：
我正在尝试使用 Flot 生成折线图，但我希望数据标签显示在图表上 - 意思是，我希望每个点的值出现在该点旁边。我觉得这应该是一个选项，但在 API 中找不到。我只是错过了什么，还是有人知道解决方法？
提前致谢。
【问题讨论】：
标签： flot
【发布时间】：2009-07-23 20:33:02
【问题描述】：
这是我添加该功能的方式，包括令人愉悦的动画效果：
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 显示到样式表。
【讨论】：
-
不错的技巧，但有没有办法让这些数据标签的大小与刻度相同并带有文本对齐中心？因为 o.left+4 不以某些值为中心。谢谢。
-
不完美，但有效...我使用的是水平条，因此在渲染值时需要将 el[1] 更改为 el[0]。谢谢
-
我有这个问题：我的 o.left 是“NaN”
您想要的功能在 Flot Google 组中请求here。它看起来从未实现过（API 中没有关于将任何标签放入图表本身的内容）。我认为您的问题的答案是不，目前无法在图表内的线条上的某些点旁边显示值。
Flot 的首席开发人员 Ole Larson 提到，在图表中显示标签与在 FLot 上显示标签不同，他们必须考虑如何扩展 API/绘图参数才能做到这一点。
也就是说，您可能想在 Flot forum 上发布问题或在 bug-tracker 上提出新功能的建议。 Ole Larson 实际上非常擅长自己解决所有问题、错误和建议。
【讨论】：
-
也就是说，Flot 是开源的，所以如果你是一个有经验的 JS 开发者，你可以自己编写这个功能。
-
谢谢。我的 JS 开发经验相对较少，但我会试一试。我也觉得我应该能够通过在栏附近的固定位置 div 中添加数据来找到解决方法（一个 la 工具提示，但永久），但还没有找到一种方法来循环数据以获取 X & Y坐标。
-
Zeth，固定位置的 div 听起来是个好主意。您还应该查看 Flot 示例（在 code.google.com/p/flot 上）以查看工具提示代码和悬停事件代码。工具提示代码可能有助于编写标签，悬停事件代码可能会向您展示如何获取条的位置。
-
另一种想法是通过使用选项配置中的 min 和 max 属性手动设置图形的大小，如下所示： { yaxis: { min: 0, max: 10 }, xaxis: { min: 0, max: 10 } } （您实际上可以在刻度格式化程序方法中检索最小值和最大值，请参阅 API）。如果您知道图形区域的大小，则可以使用条形高度和位置作为 x、y 坐标在条形上绘制标签，并根据图形的尺寸调整它们。 --如果这有帮助并且您感觉很慷慨，请评价（或选择）我的答案和/或 cmets。我是新手，正在努力达到 250。--
如果其他人正在寻找快速解决方案，请查看此插件：
【讨论】：
看起来flot-valuelabels plugin 是previous flot plugin 的一个分支——但分支代码在画布上呈现标签。你可以在插件的 Github wiki 页面上看到一个演示，here（看起来很悦目）。
【讨论】：
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);
}
【讨论】：