0

我用 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>
4

0 回答 0