2

我正在通过 jquery.flot.navigate.js 使用flot缩放如果我在模式：“时间”中使用 xaxis，则通过鼠标滚轮缩放停止工作。双击缩放继续有效。

参见示例：

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

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

对于问题 #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 （？）。我玩了一下，发现将xaxiszoomRange 从更改[0.1,10]为[0.1,3600000000]使缩放工作。

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

于 2012-10-30T15:21:40.057 回答