我有一个带有折线图的Flotr2条形图,当您将线条图悬停在工具提示时,您应该会看到坐标。
问题是绿色条形图顶部的折线图中的2个最低点未显示工具提示。
请参阅此jsfiddle:http://jsfiddle.net/P855Q/1/
这是图表的javascript:
(function basic_bars (container, horizontal) {
var NumberOfBars = 3;
var barcenters = [];
var barWidth = ( (1 / NumberOfBars) * 0.8 )
var barcenterAdjust = (barWidth * (NumberOfBars/2)) - (barWidth/2.2);
for (i = 0; i < NumberOfBars; i++) {
var barcenter = (i *(( 1 / NumberOfBars ) * 0.8));
barcenter = barcenter - barcenterAdjust;
barcenters.push(barcenter);
}
var dummyVar,
d0=[
[barcenters[0] + 3, 5],
[barcenters[0] + 3, 8.1333],
[barcenters[0] + 3, 9]
],
d7=[
[barcenters[1] + 3, 5],
[barcenters[1] + 3, 8.1333],
[barcenters[1] + 3, 9]
],
d14=[
[barcenters[2] + 3, 5],
[barcenters[2] + 3, 8.1333],
[barcenters[2] + 3, 9]
];
var a = [[3,8.303000]];
var b = [[3,8.574500]];
var c = [[3,8.222200]];
Flotr.draw(
container,[
{ data : a, label : 'a' , bars: {show : true, horizontal : false, shadowSize : 0, barWidth : 0.8, grouped: true, mouse:{track:false}} },
{ data : b, label : 'b' , bars: {show : true, horizontal : false, shadowSize : 0, barWidth : 0.8, grouped: true, mouse:{track:false}} },
{ data : c, label : 'c' , bars: {show : true, horizontal : false, shadowSize : 0, barWidth : 0.8, grouped: true, mouse:{track:false}} },
{ data : d7 , lines : { show : true }, points : { show : true },mouse:{track:true,trackFormatter: function(obj){ return obj.y; },relative: true}, color: '#999999'},
{ data : d14 , lines : { show : true }, points : { show : true },mouse:{track:true,trackFormatter: function(obj){ return obj.y; },relative: true}, color: '#999999'},
{ data : d0 , lines : { show : true }, points : { show : true },mouse:{track:true,trackFormatter: function(obj){ return obj.y; },relative: true}, color: '#999999'},
],
{
yaxis : {min : 1,max: 10,noTicks: 10,tickDecimals: 0,autoscaleMargin : 1},
xaxis : {min: 0,ticks: [["1", "1"],["2", "2"],["3", "3"],["4", "4"],["5", "5"],["6", "6"],["7", "7"],["8", "8"]]}
}
);
})(document.getElementById("example"));
答案 0 :(得分:1)
我已经分析了它的细节,发现小提琴很好!
同样代码看起来很好,(barcenters
部分代码似乎导致了一些问题。
但是有了一些值标签,event
没有触发,这会改变
<div class="flotr-mouse-value">
上面是带有类的div,它为我们提供了点值的工具提示。
每次我们悬停在任何一点上时都会动态重新定位。
我做了一些调整,以测试原因是否是由于绘制相同的点3
,但我发现没有问题..(虽然有一点开始运作)B(8.1)没有开始工作工作!!没有任何确定的变化但B(5.0)仍然没有工作..
现在关键是没有获得焦点&gt;&gt;偶数不会被触发,它启用toolTip(显示点值)
由于元素<div id="example"></div>
由脚本动态填充,我们可以得出结论,floatr脚本在覆盖绘图部分中有一些内部错误,这导致了这个问题..
更新1:在中心的条形图中观察到一种奇怪的行为,因为它似乎无法正常工作,其中叠加线已更改;检查更新fiddle
我仍在查看细节,如果出现新内容,请更新我的回答。