我用flot创建了一个图形,在解决了所有麻烦后,我还有一个问题。选择缩放:在编辑示例后,我会得到第二个(概览)图,其中a可以选择,但在主图中我不能? 似乎问题在于概述中x和y轴的定义?它们与主图不对应。
请?几个小时后,我现在完全迷失了。我对JS的知识要少一点。
<script type="text/javascript">
var options = {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
}
};
$(function () {
var rvline = ['.$js_rv_values.']; // data generated by php
$.plot("#rvgraph", [{
data: rvline
}], options);
$("#rvgraph").bind("plotclick", function (event, pos, item) {
var test = item.series.data[item.dataIndex];
var linkpartij = "<a href=\"v46/partij_kijkmee.php?gameID=" + test[2] + "\">" + test[2] + "</a>";
// index overbodige info: Index:" + test[0]
var test2 = "\nIndex: " + test[0] + "\nNieuwe rating:" + test[1] + "\nPartij:" + linkpartij;
jMsgAlert(test2)
});
var overview = $.plot("#overview", rvline, {
legend: {
show: false
},
series: {
lines: {
show: true,
lineWidth: 1
},
shadowSize: 0
},
xaxis: {
ticks: 4
},
yaxis: {
ticks: 3,
min: -2,
max: 2
},
grid: {
color: "#999"
},
selection: {
mode: "xy"
}
});
// now connect the two
$("#rvgraph").bind("plotselected", function (event, ranges) {
// clamp the zooming to prevent eternal zoom
if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
ranges.xaxis.to = ranges.xaxis.from + 0.00001;
}
if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
ranges.yaxis.to = ranges.yaxis.from + 0.00001;
}
// do the zooming
plot = $.plot("#rvgraph", getData(ranges.xaxis.from, ranges.xaxis.to),
$.extend(true, {}, options, {
xaxis: {
min: ranges.xaxis.from,
max: ranges.xaxis.to
},
yaxis: {
min: ranges.yaxis.from,
max: ranges.yaxis.to
}
}));
// don\'t fire event on the overview to prevent eternal loop
overview.setSelection(ranges, true);
});
$("#overview").bind("plotselected", function (event, ranges) {
plot.setSelection(ranges);
});
});
</script>
HTML
<div style="width:100%;">
<div id="rvgraph" style="width:70%;height:400px;float:left"></div>
<div id="overview" style="width:25%; height:125px;float:right"></div>
</div>