使用 HighCharts 的条形图无响应脚本和/或高响应时间

Posted 2023-03-11

【中文标题】使用 HighCharts 的条形图无响应脚本和/或高响应时间

【英文标题】：Unresponsive Script and/or high response time for bar chart using HighCharts

【发布时间】：2012-06-11 14:02:56

【问题描述】：

当我尝试渲染具有大量数据点的条形图时遇到问题。但这仅发生在 FireFox 中。 10 秒后出现一个弹出窗口说脚本无响应，如果我继续，大约需要 20 秒才能显示。我已经建立了一个独立的例子http://jsfiddle.net/tankchintan/UWB8h/5/

在 Chrome 中，虽然它需要大约 5 秒，但它仍然可以毫无问题地呈现。我想知道是否有解决此问题的方法？或者我可以做些什么来缩短响应时间吗？大约有 1000 行，恕我直言，这并不高。

感谢您的帮助！

【参考方案1】：

您以两种方式伤害您的用户：

首先，他们必须等待几秒钟才能呈现页面，然后整个浏览器就会冻结，因为 JS 引擎没有响应

但更重要的是，您正在伤害他们，因为您正在显示一个具有近 1000 个水平条的条形图！

第二点其实更重要。当然，浏览器的 javascript 性能各不相同（众所周知，Chrome 速度更快，但 Firefox 并没有挂在我的电脑上——但我知道你的意思）。可能有一天所有的浏览器都会很高兴地立即呈现这个图表。

但是您的用户会喜欢 10 个屏幕长的图表吗？想象一个带有thousands of rows in a single table 的网页。直截了当 - 考虑不同的数据表示：可能在 20 个样本后截断数据并显示额外的“Others...”栏？

顺便说一句，jqplot 也有类似的问题 - 我在同一页面上呈现了 10 多个简单图表。就像您的情况一样，Firefox 尖叫着脚本运行时间过长。我通过暂停渲染一个图表来修复它。该页面的作用就像一个魅力，响应速度更快，更令人愉快。

【讨论】：

我完全同意这两点。实际上，这个 vis 是页面的一部分，所有其他组件的加载速度都非常快。无论如何，我将致力于减少样本数量或完全移除水平条。我只是好奇是否有 1000 行是一个合理的上限？如果没有，那么有办法减少响应时间。

@Chantz 我不认为 1000 是一个合理的上限。如果一根条是 20 像素厚，你仍然会得到 ca。 20 个屏幕...我会说 20/50/100 取决于布局是合理的。不要指望 JavaScript 引擎（动态的、垃圾收集的语言）足够快来渲染这么多的图形。

【参考方案2】：

我同意显示这么多数据点的难度。这种情况主要发生在其他类型图表中的 FF 中，在我的例子中是柱形图。

这里的不同之处在于，在大型数据集上显示趋势可能是有原因的，而 Highcharts 缩放功能使此类图表更有用。用户可以在更大的集合中发现高点和异常，并放大以查看该区域内的各个列。同样对于柱形图，整个演示文稿都在一页上。

也就是说，无响应的脚本问题仍然存在，无论这种类型的要求如何，都需要要求用户在呈现图表之前指定数据的子集。