條形圖中的jQuery Flot plothover事件

Question

我有一個使用JQuery Flot制作的條形圖。 我希望當我將鼠標移到某個欄上時，顯示一個工具提示。

看看我在條形圖選項中所做的一些定義。

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

當我加載所有數據並繪制圖表時，我像下面的put一樣綁定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/

注意：處理時區留給讀者。