绘制数据标签

Question

我正在尝试使用Flot生成折线图,但我希望数据标签显示在图表上 - 这意味着,我希望每个点的值显示在该点旁边.我觉得这应该是一个选项,但无法在API中找到它.我只是遗漏了什么,或者有人知道解决方法吗？

提前致谢.

Answer 1

以下是我添加该功能的方法,包括令人愉快的动画效果:

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显示到样式表.

Answer 2

你想要的功能要求这里的海军报谷歌小组.它看起来并没有实现(API中没有关于在图表中放置任何标签的内容).我认为你的问题的答案是,不,目前不可能在图表内的线上的某些点旁边显示值.

Flot的首席开发人员Ole Larson提到,在图表中显示标签与FLot上的任何其他标签不同,他们必须考虑如何扩展API /绘图参数来实现它.

也就是说,您可能希望在Flot论坛上发布问题,或者在错误跟踪器上为新功能提出建议.Ole Larson实际上非常善于回答所有的问题,错误和建议.

Answer 3

如果其他人正在寻找快速解决方案,请参阅此插件:

http://sites.google.com/site/petrsstuff/projects/flotvallab

Answer 4

看起来像海军报,valuelabels插件是一个叉以前的海军报插件 -但分叉代码呈现在画布上的标签.您可以在插件的Github wiki页面上看到这个样子的演示,这里看起来非常令人愉悦.