Question

是否可以在Flot plothover中显示比

更多的信息

 x = item.datapoint[0]
 y = item.datapoint[1]

我将在我的数据中添加3条信息，例如：y，x，someinfo

[1337341819000, 7.00000000, 3.95000000]

首先是日期，第二是金额，第三是信息我将在我的悬停中显示。

Answer 1

我的数据点中包含了很多信息，例如工具提示，链接ID等。

示例数据点：[1325980800000,5,1,"6 x 4mg patch", 3]

示例plothover：

placeholder.bind('plothover', function (event, pos, item) {
    if (item && (item.series.type == 's_points' || item.series.type == 't_points')) {
        showTooltip(item.pageX, item.pageY, item.series.data[item.dataIndex][3]);
        $('canvas').css('cursor', 'pointer');
    } else {
        $('[id^="pointTooltip"]').remove();
        $('canvas').css('cursor', 'auto');
    }
});

您只需要按索引查找该数据点，并从任何数组中提取您需要的信息。

Answer 2

项目不仅包括数据点，还包括其序列和该系列数据数组中的点索引。在API Docs搜索“plothover”以查看完整的参考资料。

要添加更多信息，您可以：

从系列/索引构建外部映射到您的其他信息，然后在悬停处理程序中进行查找
提供一个processRawData钩子，它修改datapoints.format（如processRawData下的文档中所述）以添加第三个非数字值，然后将显示在item.datapoint中。这种方法需要更多的工作，但能够准确地找到你想要的东西。

Answer 3

我使用了类似下面代码的东西：

enter code here

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



        var previousPoint = null;
        $("#divname").bind("plothover", function (event, pos, item){
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));
            if (item) {
                if (previousPoint != item.dataIndex){
                    previousPoint = item.dataIndex;

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

                        showTooltip(item.pageX, item.pageY,
                                item.series.label +"- "+ y);
                                                    }
                    }
                else {
                    $("#tooltip").remove();
                    previousPoint = null;
                    }

            });

有关Flot plothover的更多信息

3 个答案: