javascript - 使用 Flot Javascript 绘图库重叠数据线

Question

我必须绘制多条线，并且想在鼠标悬停时在数据点上绘制工具提示。但是，有些可能共享相同的 (x, y)。这导致重叠点。它们被绘制在彼此之上。

似乎“plotover”事件只返回最后绘制的最顶部的数据。因此，工具提示仅适用于该点。我想在悬停多个数据点时绘制多个工具提示。

有没有人遇到过这个问题？

谢谢!

Answer 1

是的，查看源代码，flot 只会找到plothover 上的最高点。最简单的方法就是自己完成工作。下面是对 plotover 绑定(bind)的一般搜索:

    if (item) {
        var content = item.series.label;
        var someData = plot.getData();
        for (var i = 0; i < someData.length; i++){
            if (someData[i].label == item.series.label){
                continue; // skip item's series...
            }
            for (var j=0; j < someData[i].data.length; j++){
                if (someData[i].data[j][0] == item.datapoint[0] &&
                    someData[i].data[j][1] == item.datapoint[1]){
                      content += ' ' + someData[i].label; 
                }
            }                
        }
        showTooltip(item.pageX, item.pageY, content);
    }

fiddle 示例 here .

---

完整代码:

$(function () {

    var plot = $.plot($("#placeholder"),[ 
        { data: [[0,0],[1,1],[2,2]], label: "Line One"},
        { data: [[0,2],[1,1],[2,0]], label: "Line Two"},
        { data: [[0,0],[0.5,1],[1,1],[2,3]], label: "Line Three"} 
    ], {
        series: {
            lines: { show: true },
            points: { show: true }
        },
        grid: { hoverable: true, clickable: true }
    });

    function showTooltip(x, y, contents) {
        $('#tooltip').html(contents);
        $('#tooltip').css({
            top: y + 5,
            left: x + 5,
            display: 'block'});
    }

    $("#placeholder").bind("plothover", function (event, pos, item) {
        if (item) {
            var content = item.series.label;
            var someData = plot.getData();
            for (var i = 0; i < someData.length; i++){
                if (someData[i].label == item.series.label){
                    continue;   
                }
                for (var j=0; j < someData[i].data.length; j++){
                    if (someData[i].data[j][0] == item.datapoint[0] &&
                        someData[i].data[j][1] == item.datapoint[1]){
                          content += ' ' + someData[i].label; 
                    }
                }                
            }
            
            
            
            showTooltip(item.pageX, item.pageY, content);
        }
        else 
        {
            $("#tooltip").css('display','none');       
        }

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
<br/><br/>
<div id="placeholder" style="width:400px;height:300px;"></div>
<div id="tooltip" style="position: absolute;
            display: none;            
            border: 1px solid #fdd;
            padding: 2px;
            background-color: #fee;
            opacity: 0.80"></div>