我试图使用产生海军报折线图,但我想要的数据标签显示在图表上 - 的意义,我希望每个点的值旁边点出现。 我觉得这应该是一种选择,但在API中找不到它。 我只是失去了一些东西,或者没有人知道一个解决方法吗?
提前致谢。
我试图使用产生海军报折线图,但我想要的数据标签显示在图表上 - 的意义,我希望每个点的值旁边点出现。 我觉得这应该是一种选择,但在API中找不到它。 我只是失去了一些东西,或者没有人知道一个解决方法吗?
提前致谢。
这里是我添加的功能,包括一个愉快的动画效果:
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样式表。
你想要的功能要求这里的海军报谷歌小组。 它看起来并不像它是有史以来实现的(有没有什么关于把任何标签图表本身内部的API中)。 我认为,问题的答案是不,这不可能在这个时候显示出对图线内的某些点旁边的值。
奥莱拉尔森,在海军报头开发商提到,显示在图表内标签是比海军报别的不同,他们将不得不考虑如何扩展API /剧情参数做到这一点。
这就是说,你可能想要去岗上提问海军报论坛 ,或者给一个建议的bug跟踪器的新功能。 奥莱拉尔森实际上是又回到了所有的问题,错误,并建议自己真的很不错。
如果其他人正在寻找一个快速解决方案,看到这个插件:
http://sites.google.com/site/petrsstuff/projects/flotvallab
看起来像海军报,valuelabels插件是一个叉以前的海军报插件 -但分叉代码呈现在画布上的标签。 你可以看到这是什么样子的插件的Github的wiki页面上的演示, 在这里 (它看起来很顺眼)。
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);
}