Question

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

任何人都可以在下面的小提琴中找到错误吗？如果我手动将模式更改为“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缩放模式不以编程方式更新

1 个答案: