Flot 缩放模式未以编程方式更新

Question

我正在尝试根据单选按钮组中的选择在 "x" 和 "y" 之间切换缩放模式。选择 "y" 模式不会改变缩放方向。

谁能找出下面fiddle中的错误？如果我手动将模式更改为 "y"，xaxis.zoomRange 为 false，yaxis.zoomRange 为 null，我只能沿 y 轴缩放，但以编程方式重复相同的步骤没有同样的效果。

HTML:

<div id='plot' style='width:1000px;height:375px;'></div>
<input type='radio' name='zoomDir' value='x' onclick='setZoomDirection(this)' checked>Zoom in X Direction
<input type='radio' name='zoomDir' value='y' onclick='setZoomDirection(this)'>Zoom in Y Direction

JS:

var datasets = [[
                    [0,0],[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9]
                ],
                [
                    [0,0],[-1,-1],[-2,-2],[-3,-3],[-4,-4],[-5,-5],[-6,-6],[-7,-7],[-8,-8],[-9,-9]
                ]];

var plot = $.plot("#plot",datasets,{
        pan: {
          interactive: true
        },
        zoom: {
          interactive: true,
          mode: "x"
        },
        xaxis: {
            zoomRange: null
        },
        yaxis: {
            zoomRange: false
        }
    });

function setZoomDirection(radioBtn) {
    var options = plot.getOptions();
    var data = plot.getData();

    options.zoom.mode = radioBtn.value;

    if(radioBtn.value == 'y') {
        options.xaxis.zoomRange = false;
        options.yaxis.zoomRange = null;
    }
    else {
        options.yaxis.zoomRange = false;
        options.xaxis.zoomRange = null;
    }

    plot = $.plot("#plot",data,options);
};

Answer 1

1) 未调用您的 setZoomDirection 函数，因为它在另一个范围内，然后是 html 中的内联 onclick 处理程序。我将其更改为 jQuery 事件处理程序。

2) 内部 flot 使用 options.xaxes[0] 而不是 options.xaxis。只需替换这些行，您就会得到专业的结果：

if (this.value == 'y') {
    options.xaxes[0].zoomRange = false;
    options.yaxes[0].zoomRange = null;
}
else {
    options.yaxes[0].zoomRange = false;
    options.xaxes[0].zoomRange = null;
}

完整示例请参阅 updated fiddle。

Flot 缩放模式未以编程方式更新

Flot zoom mode not updating programmatically

mode

flot

zooming