无法显示 flot 工具提示

Question

我正在尝试显示浮动工具提示，但没有任何反应。谁能告诉我我做错了什么？也许它不承认我的观点，它们出现在图表上（y 轴上的人数，x 轴上的年份）。

$.post('php/myprogram.php', 
                 function(output){
                        var obj = jQuery.parseJSON( output );
                        var data = [];
                        var coordinate = [];
                        for (var i = 0; i< obj.length-1; i++) {
                            coordinate.push(obj[i][0]);
                            coordinate.push(obj[i][1]);
                            data.push(coordinate);
                            coordinate = [];
                        }

                            var options = {
                                xaxis: {
                                    axisLabel: 'YEAR',
                                    axisLabelUseCanvas: true,
                                    axisLabelFontSizePixels: 15,
                                    axisLabelFontFamily: 'Arial',
                                    tickDecimals: 0
                                },
                                yaxis: {
                                    axisLabel: '',
                                    axisLabelUseCanvas: true,
                                    axisLabelFontSizePixels: 15,
                                    axisLabelFontFamily: 'Arial'
                                },
                                series: {
                                    lines: {
                                        show: true,
                                        color: '#ffa500'
                                    },
                                    points: {
                                        show: true
                                    }
                                },
                                grid: {
                                    hoverable: true
                                }
                            };

                            $.plot($("#byYear"),
                                    [data],
                                   options
                            );


                        function showTooltip(x, y, contents) {
                            $("<div id='tooltip'>" + contents + "</div>").css({
                                position: "absolute",
                                display: "none",
                                top: y + 5,
                                left: x + 5,
                                border: "1px solid #fdd",
                                padding: "2px",
                                "background-color": "#fff",
                                opacity: 0.80
                            }).appendTo("body").fadeIn(200);

                        }


                        $("#byYear").bind("plothover", function (event, pos, item) {
                                var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
                                //$("#hoverdata").text(str);

                                if (item) {
                                    if (previousPoint != item.dataIndex) {

                                        previousPoint = item.dataIndex;

                                        $("#tooltip").remove();
                                        var x = item.datapoint[0].toFixed(2);
                                        var y = item.datapoint[1].toFixed(2);

                                        showTooltip(item.pageX, item.pageY, str);
                                    }
                                } else {
                                    $("#tooltip").remove();
                                    previousPoint = null;            
                                }

                        }); //end bind
                 });

Answer 1

在 fiddle 中工作得很好。

但是您在 $.post() 回调中定义了 showTooltip() 和 bind() 函数。这意味着在多次 ajax 调用后，您会多次调用 plothover 函数。尝试将这两个函数移出 $.post() 回调。

Answer 2

您可以使用“flot.tooltip”插件，而不是自己处理 plothover 事件。

Answer 3

@Raidri 部分正确 - 我的工具提示需要在我的代码之外。但我不得不换一种方式：

html：（我只包含了基本的 flot 代码）

<div id="tooltip"></div>
<div id="byYear"></div>

css:

#byYear {
    width: 50%;
    height: 100%;
}
#tooltip {
    position: absolute;
    display: none;
    border: 1px solid black;
    padding: 2px 5px;
    background-color: white;
    opacity: 0.80;
    z-index: 5;
}

jquery:

$.post('php/myprogram.php', 
                 function(output){
                        var obj = jQuery.parseJSON( output );
                        var data = [];
                        var coordinate = [];
                        for (var i = 0; i< obj.length-1; i++) {
                            coordinate.push(obj[i][0]);
                            coordinate.push(obj[i][1]);
                            data.push(coordinate);
                            coordinate = [];
                        }

                            var options = {
                                xaxis: {
                                    axisLabel: 'YEAR',
                                    axisLabelUseCanvas: true,
                                    axisLabelFontSizePixels: 15,
                                    axisLabelFontFamily: 'Arial',
                                    tickDecimals: 0
                                },
                                yaxis: {
                                    axisLabel: '',
                                    axisLabelUseCanvas: true,
                                    axisLabelFontSizePixels: 15,
                                    axisLabelFontFamily: 'Arial'
                                },
                                series: {
                                    lines: {
                                        show: true,
                                        color: '#ffa500'
                                    },
                                    points: {
                                        show: true
                                    }
                                },
                                grid: {
                                    hoverable: true
                                }
                            };

                            $("#byYear").bind("plothover", function (event, pos, item) {
                                if (item) {
                                        var x = item.datapoint[0].toFixed(0),
                                            y = item.datapoint[1].toFixed(0);

                                        $("#tooltip").html(y + " instances")
                                            .css({top: item.pageY+5, left: item.pageX+5})
                                            .fadeIn(200);
                                    } else {
                                        $("#tooltip").hide();
                                    }

                            });
                            $.plot($("#byYear"),
                                    [data],
                                   options
                            );



                 });