漂亮的数据标签(Flot Data Labels)

2019-06-26 15:42发布

我试图使用产生海军报折线图,但我想要的数据标签显示在图表上 - 的意义,我希望每个点的值旁边点出现。 我觉得这应该是一种选择,但在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中)。 我认为,问题的答案是不,这不可能在这个时候显示出对图线内的某些点旁边的值。

奥莱拉尔森,在海军报头开发商提到,显示在图表内标签是比海军报别的不同,他们将不得不考虑如何扩展API /剧情参数做到这一点。

这就是说,你可能想要去岗上提问海军报论坛 ,或者给一个建议的bug跟踪器的新功能。 奥莱拉尔森实际上是又回到了所有的问题,错误,并建议自己真的很不错。



Answer 3:

如果其他人正在寻找一个快速解决方案,看到这个插件:

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



Answer 4:

看起来像海军报,valuelabels插件是一个叉以前的海军报插件 -但分叉代码呈现在画布上的标签。 你可以看到这是什么样子的插件的Github的wiki页面上的演示, 在这里 (它看起来很顺眼)。



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


文章来源: Flot Data Labels
标签: flot