flot を使用してグラフを作成しました。すべての問題を解決した後、問題が 1 つあります。ズームの選択: 例を編集した後、選択できる 2 番目の (概要) グラフを取得しますが、メイン グラフでは選択できませんか? 問題は、概要の 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>