条形图中的JQuery Flot plothover事件答案

【问题标题】：JQuery Flot plothover event in Bar chart条形图中的JQuery Flot plothover事件
【发布时间】：2014-09-19 22:11:56
【问题描述】：

我有一个使用 JQuery Flot 制作的条形图。我希望当我将鼠标移过某个栏时，显示一个工具提示。

看看我在条形图选项中所做的一些定义。

grid: {
   hoverable: true,
   borderWidth: 0,
   color: '#838383',
   clickable: true
}

当我加载所有数据并绘制图表时，我将plothover 事件绑定为如下所示

$(dataParameters.containerSuccess).bind("plothover", self.funcaoPassarMouse);

我的plothover 函数

self.funcaoPassarMouse = function (event, pos, item) {
    if (item) {
        if (previousPoint != item.dataIndex) {
            previousPoint = item.dataIndex;
            $("#tooltip").remove();
            var x = item.datapoint[0].toFixed(2),
            y = self.CommaFormatted(item.datapoint[1].toFixed(2));
            var mes = self.ObtemMes(item);
            self.exibirTooltip(item.pageX, item.pageY, "R$ " + y + " em " + mes);
        }
    } else {
        $("#tooltip").remove();
        previousPoint = null;
    }
}

我有很多使用 JQuery Flot 的图表，并且在所有图表中，使用此功能的 plothover 事件运行良好，但在条形图中除外。

在条形图中，我看到item 参数带有null 值，我不知道为什么。

谁能帮帮我？

JSFiddle

【问题讨论】：

你能制作一个小提琴（或者更好的堆栈 sn-p）来证明你的问题吗？
@MattBurland 当然，给我一些时间，我会把小提琴的链接放在这里
在这里工作正常：jsfiddle.net/mwyeck3q/1
@MattBurland 看看jsfiddle.net/7snkmshf/1
我认为问题在于time 作为轴设置与条形图交互的方式（注意细条）。如果您将轴的类型更改为“类别”，那么您会得到正确检测的粗条（但会丢失时间格式）。另请注意，如果您将鼠标悬停在图表边缘，它确实会检测到第一个和最后一个柱，这很奇怪。

标签： jquery jquery-plugins

【解决方案1】：

问题似乎在于time 轴如何与条形图交互。最简单的解决方案可能是将您的时间转换为字符串并将您的轴设为category。例如：

    var data = [
        [new Date(1388534400000).toDateString(), 10],
        [new Date(1391212800000).toDateString(), 8],
        [new Date(1393632000000).toDateString(), 4],
        [new Date(1396310400000).toDateString(), 13],
        [new Date(1398902400000).toDateString(), 17],
        [new Date(1401580800000).toDateString(), 9]
    ];

然后：

        series: {
            bars: {
                show: true,
                align: "center",
                barWidth: 0.05     // set this to whatever makes them skinny enough for you
            }
        },
        xaxis: {
            mode: "categories",
            //... etc

http://jsfiddle.net/7snkmshf/4/

注意：处理时区是留给读者的。

【讨论】：