flot plothover and transformation

时间:2014-09-07 02:41:09

标签: javascript tooltip flot

我将http://www.flotcharts.org/flot/examples/interacting/index.html中的图表修改为具有对数x轴。在图表中我添加了一行:

xaxis: {transform: function (v) {return v == 0 ? v : Math.log(v);}}

    var sin = [],             cos = [];

    for (var i = 0; i < 14; i += 0.5) {
        sin.push([i, Math.sin(i)]);
        cos.push([i, Math.cos(i)]);
    }

    var plot = $.plot("#placeholder", [
        { data: sin, label: "sin(x)"}
    ], {
        series: {
            lines: {
                show: true
            },
            points: {
                show: true
            }
        },
        grid: {
            hoverable: true,
            clickable: true
        },
        yaxis: {
            min: -1.2,
            max: 1.2
        },
        xaxis: {transform: function (v) {return v == 0 ? v : Math.log(v);}}
    });

    $("<div id='tooltip'></div>").css({
        position: "absolute",
        display: "none",
        border: "1px solid #fdd",
        padding: "2px",
        "background-color": "#fee",
        opacity: 0.80
    }).appendTo("body");

    $("#placeholder").bind("plothover", function (event, pos, item) {

        if ($("#enablePosition:checked").length > 0) {
            var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
            $("#hoverdata").text(str);
        }

        if ($("#enableTooltip:checked").length > 0) {
            if (item) {
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                $("#tooltip").html(item.series.label + " of " + x + " = " + y)
                    .css({top: item.pageY+5, left: item.pageX+5})
                    .fadeIn(200);
            } else {
                $("#tooltip").hide();
            }
        }
    });

    $("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) {
            $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
            plot.highlight(item.series, item.datapoint);
        }
    });

这似乎可以防止plothover被传递给'item' - 它总是未定义的。如果我注释掉变换线,一切正常。

我哪里错了?或者它是Flot中的错误?请帮忙。

1 个答案:

答案 0 :(得分:3)

您需要inverseTransform功能。如文档中所述:

  

inverseTransform只是变换函数的反函数   (所以v == inverseTransform(transform(v))对所有相关的v)。它是   从画布坐标转换为数据坐标所需的,   例如用于鼠标交互,其中单击某个像素。如果你   不使用Flot的任何互动功能,您可能不需要它。

所以:

xaxis: {
    transform: function (v) {
        return v === 0 ? 0 : Math.log(v);
    },
    inverseTransform: function (v) { 
        return Math.exp(v); 
    }
}

这里是example