浮动缩放模式未以编程方式更新

Question

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

谁能在下面的小提琴中找到问题所在？如果我要手动将模式更改为“y”，xaxis.zoomRange 为 false，yaxis.zoomRange 为 null，我只能沿 y 轴缩放，但以编程方式重复相同的步骤不会产生相同的效果。

http://jsfiddle.net/apandit/que5w852/

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) 内部浮点使用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。