2

jquery.flot.navigate.js を介してflotズームを使用しています xaxis をモード「time」で使用している場合、マウスホイールを介したズームが機能しなくなります。ダブルクリックによるズームは引き続き機能します。

例を参照してください:

var plot;
$(function () {
    var d3 = [[1350645091000, 1.54], [1351287868000, 1.59], [1351546638000, 1.59]];
    var d2 = [[1350645091000, 3.4], [1351287868000, 3.51], [1351546638000, 3.51]];
    var d1 = [[1350645091000, 1], [1351287868000, 1], [1351546638000, 1]];
    var all_data = [{ 
        label: 'PageRank = 1.00', color: '#119F11', data: d1
    }, { 
        label: 'Real PageRank = 3.51', color: '#14C914', data: d2
    }, { 
        label: 'TrustRank(sm) = 1.59', color: '#0D8FDD', data: d3
    }];

    var plot_conf = {
        series: {
            points: { 
                show: true 
            },
            lines: {
                show: true,
                lineWidth: 1.5
            },
            shadowSize: 1.5
        },
        crosshair: { 
            mode: 'x' 
        },
        grid: { 
            hoverable: true, 
            autoHighlight: false 
        },
        legend: {
            noColumns: 3,
            container: $('#legend')
        },
        zoom: {
            interactive: true
           },
        pan: {
            interactive: true
        },
        xaxis: {
            mode: 'time',
            timeformat: '%d.%m.%Y ',
            timezone: 'browser',
            zoomRange: [0.1, 10], 
            panRange: [1350218985000, 1351738106000]
        },
        yaxis: {
            zoomRange: [0.1, 10], 
            panRange: [-1, 11]
        }
    };

    plot = $.plot($('#placeholder'), all_data, plot_conf);

    $('#placeholder').bind('plotzoom', function (event, plot) {
        legends();
    });

    $('#placeholder').bind('plotpan', function (event, plot) {
        legends();
    });

    legends();

    // Cross --------------------------
    function legends() {
        var legends = $('#legend .legendLabel');
        legends.each(function () {
            // fix the widths so they don't jump around
            $(this).css('width', $(this).width());
        });

        var updateLegendTimeout = null;
        var latestPosition = null;

        function updateLegend() {
            updateLegendTimeout = null;
            var pos = latestPosition;
            var axes = plot.getAxes();
            if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
                pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
                return;
            }

            var i, j, dataset = plot.getData();
            for (i = 0; i < dataset.length; ++i) {
                var series = dataset[i];
                // find the nearest points, x-wise
                for (j = 0; j < series.data.length; ++j) {
                    if (series.data[j][0] > pos.x) {
                        break;
                    }
                }

                // now interpolate
                var y, p1 = series.data[j - 1], p2 = series.data[j];
                if (p1 == null) {
                    y = p2[1];
                }
                else if (p2 == null) {
                    y = p1[1];
                }
                else {
                    y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
                }
                legends.eq(i).text(series.label.replace(/=.*/, '= ' + y.toFixed(2)));
            }
        }

        $('#placeholder').bind('plothover', function (event, pos, item) {
            latestPosition = pos;
            if (!updateLegendTimeout) {
               updateLegendTimeout = setTimeout(updateLegend, 50);
            }
        });
    }
});

それで、xaxisがモード「時間」に切り替えられた状態でズームを強制的に動作させるためのヒントを誰かに教えてもらえますか？

4

1 に答える 1

4

2 つの問題があります。1 つは、マウスホイールによるズームが機能しないことです。2 つ目は、x 軸のズームが機能しないことです。

問題＃1の場合：

ダブルクリックズームは機能しますが、マウスホイールズームは機能しません。これは jQuery 1.7.2 以降の場合です。jQuery 1.6.4 に変更すると、再び機能し始めます。

その理由は、flot 0.7のナビゲート プラグインには、新しい jQuery バージョンと互換性のないマウスホイール プラグインが含まれているためです。ナビゲートプラグインにインラインで圧縮されているため、正確な理由はわかりません。

コードに次のようなものを追加すると、エラーが表示されます。

placeholder.bind('plotzoom', function (event, plot) {
    var axes = plot.getAxes();
    $(".message").html("Zooming to x: "  + axes.xaxis.min.toFixed(2)
                       + " &ndash; " + axes.xaxis.max.toFixed(2)
                       + " and y: " + axes.yaxis.min.toFixed(2)
                       + " &ndash; " + axes.yaxis.max.toFixed(2));
});

NaN数値である必要がある場合、4 つの値すべてに対して常に表示されます。これは、マウスホイール イベントに適切な pageX/pageY パラメータがないためです。

別の方法としては、古い jQuery を使用するか、githubの新しいバージョンのナビゲート プラグインを使用することです。

問題＃2の場合：

xaxis ズームを機能させるにzoomRangeは、ミリ秒 (?) 単位でカウントする a を使用する必要があります。xaxis少しいじってみたところ、 zoomRange を から[0.1,10]に変更すると[0.1,3600000000]ズームが機能することがわかりました。

ここでは、新しいナビゲート プラグイン (ただし、古い flot) で動作し、変更されていzoomRangeます: http://jsfiddle.net/ryleyb/Men3X/2/

于 2012-10-30T15:21:40.057 に答える