Question

我已经使用jQuery flot实现了一些缩放功能，但它工作得不是很正确。缩放是通过捕获flot的“plotselected”事件并使用“ranges”参数重新绘制来修改xaxis和yaxis max和min值来实现的。

绘图在初始绘制时确实正确显示，我可以拖动以进行x-y选择。重绘绘图时，虽然绘制了适当的数据范围，但屏幕上轴网格的实际大小会缩小。此外，每次缩放重新绘制时，轴标签都会从视图中消失，但我仍然可以在检查器中看到它们，并且在绘图的最左上方有一些看似轴标签可能已向上移动的残骸在那里，部分（几乎）可见。我有一些其他代码使用不同的数据重新绘制绘图，同时也从视图中删除轴标签，尽管绘图的大小不缩小（与缩放时一样），并且再次绘制适当的数据。我提到这两个问题或许有共同的起源。

我想也许我可以在重新绘制之前以某种方式破坏情节或清除画布来处理这些问题，但我还没有找到关于如何做到这一点的任何指导。

以下是一些相关的代码段。第一个列出最初渲染绘图并绑定到“plotselected”事件的代码：

            o.midGraph = $.plot($("#small-graph-mid"), testData, graphOptions);
                $("#small-graph-mid").unbind("plotselected");
                $("#small-graph-mid").bind("plotselected", function (event, ranges) {
                    graphOptions = o.midGraph.getOptions();
                    testData = o.midGraph.getData();
                    o.midGraph = $.plot($("#small-graph-mid"), testData,
                            self._graphZoomOptions(graphOptions, ranges));
                });

这是将轴范围设置为新范围的函数：

    _graphZoomOptions: function(options, ranges) {
        return $.extend(true, {}, options, {
            xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
            yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
        });
    },

我是否正确认为我需要以某种方式破坏/清除/重置情节/画布？

Answer 1

您使用的是jquery 1.7.2吗？

如果是这样，请查看this thread，特别是注释＃4中包含的固定导航插件。

经过几个小时的乱搞，它解决了导航插件的问题。

Answer 2

这是我如何将Y轴设置到一定范围。之后所有Y轴将设置为相同的范围。 “每个”循环中的4个语句中的2个可能是不必要的，我只是不记得是哪个。

$.each(yaxes, function(_, _yaxis){
    _yaxis.min = _min;
    _yaxis.max = _max;
    _yaxis.options.min=_min;
    _yaxis.options.max=_max;
});

setupGrid();
draw();

你不应该破坏图表并重绘它。 setupGrid和draw函数为您处理该部分。

Answer 3

我遇到了这个问题，不使用plot.getOptions（）解决了这个问题。没有看到int的原因，但使用我在启动绘图时创建的原始选项对象。

jQuery flot - 缩放导致绘图缩小，轴标签消失

3 个答案: