Jquery 有关Flot plothover的详细信息

在Flot PLOT HOVER中显示的信息是否可能比

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

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

[1337341819000, 7.00000000, 3.95000000]

第一个是日期，第二个是金额，第三个是信息

---

我将在我的悬停中显示。

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

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

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

提供一个processRawData钩子，该钩子修改datapoints.format（如processRawData下的文档中所述）以添加第三个非数字值，该值随后将显示在item.datapoint中。这种方法需要做更多的工作，但能让你得到你想要的东西

---

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

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

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

提供一个processRawData钩子，该钩子修改datapoints.format（如processRawData下的文档中所述）以添加第三个非数字值，该值随后将显示在item.datapoint中。这种方法需要做更多的工作，但能让你得到你想要的东西

---

我使用了与以下代码类似的代码：

在此处输入代码

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;
                    }

            });

函数显示工具提示（x、y、内容）{
$（''+内容+''）.css（{
位置：'绝对'，
显示：“无”，
//浮动：'左'，
顶部：y-40，
左：x-30，
边框：“1px实心#fdd”，
填充：“2px”，
“背景色”：“eee”，
不透明度：0.80
}).appendTo（“body”）.fadeIn（200）；
}
var-previousPoint=null；
$（“#divname”）.bind（“plothover”，函数（事件、位置、项目）{
$（“#x”）.text（pos.x.toFixed（2））；
$（“#y”）.text（pos.y.toFixed（2））；
如果（项目）{
if（上一个点！=item.dataIndex）{
previousPoint=item.dataIndex；
$（“#工具提示”）.remove（）；
var x=项。数据点[0]。固定（2），
y=item.datapoint[1].toFixed（2）；
显示工具提示（item.pageX、item.pageY、，
项目系列标签+“-”+y）；
}
}
否则{
$（“#工具提示”）.remove（）；
previousPoint=null；
}
});

我使用了与以下代码类似的代码：

在此处输入代码

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;
                    }

            });

函数显示工具提示（x、y、内容）{
$（''+内容+''）.css（{
位置：'绝对'，
显示：“无”，
//浮动：'左'，
顶部：y-40，
左：x-30，
边框：“1px实心#fdd”，
填充：“2px”，
“背景色”：“eee”，
不透明度：0.80
}).appendTo（“body”）.fadeIn（200）；
}
var-previousPoint=null；
$（“#divname”）.bind（“plothover”，函数（事件、位置、项目）{
$（“#x”）.text（pos.x.toFixed（2））；
$（“#y”）.text（pos.y.toFixed（2））；
如果（项目）{
if（上一个点！=item.dataIndex）{
previousPoint=item.dataIndex；
$（“#工具提示”）.remove（）；
var x=项。数据点[0]。固定（2），
y=item.datapoint[1].toFixed（2）；
显示工具提示（item.pageX、item.pageY、，
项目系列标签+“-”+y）；
}
}
否则{
$（“#工具提示”）.remove（）；
previousPoint=null；
}
});

我的数据点中包含了很多信息，比如工具提示、链接id等

示例数据点：

[1325980800000,5,1，“6 x 4mg贴片”，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');
    }
});

---

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

我的数据点中包含很多信息，如工具提示、链接id等

示例数据点：

[1325980800000,5,1，“6 x 4mg贴片”，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');
    }
});

---

你只需要按索引顺序找到数据点，然后从任何数组中提取你需要的信息。

Nice，我今晚没有想过要走这条路线。我只是在想怎么做的时候偶然发现了这一点。这是一个很好的答案，应该这样标记。很好，我今晚没有想过要走这条路线。只是在我想怎么做的时候偶然发现了这个。这是一个很好的答案，应该这样标记。