4

我有一个带有折线图的 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"));
4

1 回答 1

1

我分析了它的细节，发现小提琴很好！

代码看起来也很好，（除了barcenters部分代码似乎引起了一些问题..

但是对于某些值标签，event不会触发，这将改变

<div class="flotr-mouse-value">

以上是带有类的 div，它为我们提供了点值的工具提示。

每次我们将鼠标悬停在任何点上时，它都会动态重新定位。

我做了一些调整以测试原因是否是由于在同一点上绘制3但我发现没有问题..（虽然一点开始起作用）B（8.1）不起作用开始工作！没有任何改变但是 B(5.0) 仍然无法正常工作..

现在，由于该点没有获得焦点>>，因此不会触发甚至启用工具提示（显示点值）

由于元素<div id="example"></div>是由脚本动态填充的，我们可以得出结论，floatr 脚本在覆盖绘图部分存在一些内部错误，这导致了这个问题。

更新 1：在 Bar 居中观察到一种奇怪的行为，因为这似乎不起作用，覆盖线改变了；检查更新fiddle

我仍在寻找细节，如果有新的东西出现，我会更新我的答案。

于 2014-07-18T13:52:22.020 回答