Question

我正在通过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切换到模式：“时间”？

Answer 1

你有两个问题 - 一个是用鼠标滚轮缩放不起作用。二，放大xaxis不起作用。

问题＃1：

双击缩放工作，但鼠标滚轮缩放不起作用。这是jQuery 1.7.2或更高版本。如果我改为jQuery 1.6.4，它会再次开始工作。

原因是来自flot 0.7的navigate plugin包含一个与较新的jQuery版本不兼容的mousewheel插件。我无法确切地说明为什么由于它被内联压缩到导航插件中。

如果您在代码中添加以下内容，则可以看到错误：

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));
});

对于所有4个值，它总是显示NaN，它们应该是数字。这是因为鼠标滚轮事件没有正确的pageX / pageY参数。

您的替代方案是使用较旧的jQuery，或使用github中较新版本的导航插件。

问题＃2：

为了让xaxis缩放工作，您需要使用以毫秒为单位的zoomRange（？）。我玩了一下，发现将xaxis zoomRange从[0.1,10]更改为[0.1,3600000000]可以缩放工作。

此处它正在使用较新的导航插件（但旧的flot）并更改了zoomRange：http://jsfiddle.net/ryleyb/Men3X/2/

如果xaxis处于时间模式，则Flot不会缩放

参见示例：

1 个答案: