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

在Flot Google小组中请求您想要的功能here。它看起来并没有实现（API中没有关于在图表中放置任何标签的内容）。我认为你的问题的答案是，不，目前不可能在图表内的某些点旁边显示值。

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

也就是说，您可能希望在Flot forum上发布问题，或在bug-tracker上为新功能提出建议。 Ole Larson实际上非常善于回答所有的问题，错误和建议。

Answer 3

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

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

Answer 4

看起来flot-valuelabels plugin是previous flot plugin的分支 - 但是分叉代码在画布上呈现标签。您可以在插件的Github wiki页面here上看到这个样子的演示（看起来非常令人愉悦）。

Answer 5

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);
}

绘制数据标签

5 个答案: