javascript - Flot 的大图无法在 FireFox 中显示

Question

我遇到了 Flot 库在 Firefox 中无法显示大图的问题。

这是我的样本。

http://jsfiddle.net/SunMoonStar/9x7aJ/1334/

当我将高度设置为50000时，我会得到这样的错误

NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMCanvasRenderingContext2D.save]

我希望任何人都可以帮助我。

提前致谢。

更新:

IE9标签是因为当我将高度设置为50000时，它在IE9中只能显示一半的图形。

我认为这可能与FireFox的原因相同。

Answer 1

是的；这是大多数/所有浏览器上的常见问题，而不仅仅是 Firefox。这不是 Flot 的问题，而是浏览器 Canvas 实现的限制。

Canvas 设计为在单个屏幕内工作，即最大几千×几千像素。这是出于多种原因；例如，插入 25 亿像素(50k x 50k)的性能将非常糟糕，几乎毫无用处。因此，我严重怀疑浏览器开发人员是否针对如此大的 Canvas 尺寸进行了设计或测试。

您需要重新考虑页面的架构，鉴于我上面提到的性能问题，该架构可能无论如何都行不通。我认为，由于尺寸如此之大，您正在进行某种滚动。您应该使用 Flot 导航插件在更小的 Canvas 中滚动图表数据，而不是创建一个巨大的 Canvas 并在父 div 中滚动它。