我将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中的错误?请帮忙。
答案 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。