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

【问题标题】：jQuery flot - Zoom causes plot to shrink, axis labels to disappearjQuery flot - 缩放导致绘图缩小，轴标签消失
【发布时间】：2012-05-24 01:07:08
【问题描述】：

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

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

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

这里有一些相关的代码sn-ps。第一个列出了最初渲染绘图并绑定到“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 }
        });
    },

我认为我需要以某种方式破坏/清除/重置绘图/画布的想法是否正确？

【问题讨论】：

您在使用任何插件吗？在开发过程中尽可能多地禁用它们。查看您的初始化代码，您似乎没有遵循 FLOT zip 文件中包含的 PLUGINS.txt 文件中概述的一般插件样式。为什么不使用已经包含的导航插件来实现缩放和平移：people.iola.dk/olau/flot/examples/navigate.html

标签： jquery flot

【解决方案1】：

您使用的是 jquery 1.7.2 吗？

如果是这样，请查看this thread，尤其是评论 #4 中包含的固定导航插件。

经过数小时的折腾，它解决了我使用导航插件的问题。

【讨论】：

这就是互联网很棒的原因。有这个确切的问题 - 有人已经修复它并免费发布 - 其他人提出了关于堆栈溢出的确切问题 - 有人发布了链接到该确切解决方案的答案！全面获胜

【解决方案2】：

以下是我将 Y 轴设置为特定范围的方法。之后所有 Y 轴都将设置为相同的范围。 “each”循环中的 4 个语句中有 2 个可能是不必要的，我只是不记得是哪些。

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

setupGrid();
draw();

您不需要销毁图表并重新绘制它。 setupGrid 和 draw 函数会为您处理该部分。

【讨论】：

【解决方案3】：

我遇到了这个问题，通过不使用 plot.getOptions() 解决了它。没有考虑造成这种情况的原因，但使用我在开始绘图时创建的原始选项对象有效。

【讨论】：