如何将内容添加到 JQuery Flot 图表数据数组工具提示

How To Add Content To JQuery Flot Chart Data Array ToolTip

本文关键字：Flot 数据 工具提示 数组 JQuery 添加      更新时间：2023-09-26

我有一个JQuery Flot线图。我以前没有使用过JQuery Flot Charts，对JQuery Flot Charts也没有什么经验。我环顾四周，在其他地方找不到答案。

JQuery Flot 折线图的数据数组如下：

var twitter = [[1, 27], [2, 34], [3, 51]]

当用户将鼠标悬停在折线图中的每个数据点上时，将向用户显示工具提示。工具提示当前显示以下内容：

工具提示示例，推特>数据点一：|X：1 |年：27.00

我可以看到这是在 Var 选项中控制的：

var options = {
                        grid : {
                            hoverable : true
                        },
                        colors : ["#568A89", "#3276B1"],
                        tooltip : true,
                        tooltipOpts : {
                            **//content : "Value <b>$x</b> Value <span>$y</span>",**

现在，我的每个数据数组都显示不同的数据点。例如：

数据数组一：显示用户配置文件视图的数量数据数组二：显示用户点数数据数组三：显示好友数量

现在，当用户将鼠标悬停在每个数据点上时，用户需要能够看到每个数据点与什么相关。

例如：

当用户将鼠标悬停在 1 个数据数组 1 上>时：[1， 27]

工具提示需要显示> 27 个配置文件视图

当用户将鼠标悬停在 2>数据数组上时：[2， 34]

工具提示需要显示> 34 个用户点

如何自定义工具提示显示的内容？

如何为每个单独的数据数组提供不同的工具提示内容？

感谢您对这个问题的帮助和支持。

目前尚不清楚如何获取每个工具提示的显示，但在此示例中它是静态的。这样的事情应该有效。在这里小提琴 - 示例 

var tickVals = [[1,"Profile Views"],[2,"User Points"],[3,"Number of Friends"]]
var dataLines = [
{
 label: "Twitter",
 data: [[1, 27], [2, 34], [3, 51]],
}
];

$.plot($("#placeholder"), dataLines, {
grid: {
      hoverable: true,
      mouseActiveRadius: 10
},

lines: {show: true},
points: {
    show: true,
    radius: 4
},
});

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

    var previousPoint = null;
    $("#placeholder").on("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]-1,
                        y = item.datapoint[1];
                showTooltip(item.pageX, item.pageY,
                                tickVals[x][1] + "- " + y);
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
     });
相关文章：