37

我正在尝试使用 Flot 生成折线图，但我希望数据标签显示在图表上 - 意思是，我希望每个点的值出现在该点旁边。我觉得这应该是一个选项，但在 API 中找不到。我只是错过了什么，还是有人知道解决方法？

提前致谢。

4

5 回答 5

45

这是我添加该功能的方式，包括令人愉悦的动画效果：

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 移动到样式表。

于 2010-04-08T15:25:11.063 回答
10

您想要的功能在 Flot Google 组中请求。它看起来从未实现过（API 中没有关于将任何标签放入图表本身的内容）。我认为您的问题的答案是不，目前不可能在图表内的线条上的某些点旁边显示值。

Flot 的首席开发人员 Ole Larson 提到，在图表中显示标签与 FLot 上的其他任何内容都不同，他们必须考虑如何扩展 API/绘图参数来做到这一点。

也就是说，您可能想在Flot 论坛上发布问题或对新功能的错误跟踪器提出建议。Ole Larson 实际上非常擅长自己解决所有问题、错误和建议。

于 2009-07-23T23:24:07.997 回答
9

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

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

于 2010-02-17T00:11:13.257 回答
5

看起来flot-valuelabels 插件是以前的 flot 插件的一个分支——但分支代码在画布上呈现标签。你可以在插件的 Github wiki 页面上看到一个演示，这里（看起来很令人赏心悦目）。

于 2010-12-02T20:37:34.203 回答
1 
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);
}
于 2013-02-01T10:22:57.930 回答