Question

我有一个使用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事件非常有效，除了在Bars图表中。

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

任何人都可以帮助我吗？

JSFiddle

Answer 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/

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

条形图中的JQuery Flot plothover事件

1 个答案: