javascript - flot plothover 和 transform

Question

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

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

变种罪 = [], 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 被传递一个“项目”——它总是未定义的。如果我注释掉变换线，一切正常。

我哪里错了？还是 Flot 中的错误？请帮忙。

Answer 1

您需要一个inverseTransform 函数。如文档中所述:

The inverseTransform is simply the inverse of the transform function (so v == inverseTransform(transform(v)) for all relevant v). It is required for converting from canvas coordinates to data coordinates, e.g. for a mouse interaction where a certain pixel is clicked. If you don't use any interactive features of Flot, you may not need it.

所以:

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

这是一个 example .