jquery - 有关 Flot plothover 的更多信息

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]

示例绘图：

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

Item 不仅包括数据点，还包括它的系列以及该系列在数据数组中的点的索引。在API 文档中搜索“plothover”以查看完整参考。

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

1. 构建从系列/索引到附加信息的外部映射，然后在悬停处理程序中进行查找

2. 提供一个修改 datapoints.format 的 processRawData 钩子（如 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;
                    }

            });