Chart.js 的跨浏览器支持

Posted 2023-03-25

【中文标题】Chart.js 的跨浏览器支持

【英文标题】：Cross Browser Support for Chart.js

【发布时间】：2020-02-25 06:10:16

【问题描述】：

我继承了一个使用 Chart.js 的应用程序，它最近在最新版本的 Firefox 69.0.3 中出现了NS_ERROR_FAILURE 错误。 Firefox's documentation 并不完全有助于查明错误原因。

我的直觉是它与 Chart.js 使用 <canvas> 的方式有关。有没有人找到 Chart.js 的跨浏览器解决方案？在 Firefox 中，画布中断并且无法完成网站的呈现。在 Edge 中，图表中的条形高度无限。 Edge 中没有错误。该应用程序在 Chrome 中运行良好。此应用程序仅在 Windows 环境中测试过，我尚未在 Mac 或 Safari 上测试过此应用程序。

我尝试升级到不同版本的 Chart.js，仍然没有修复错误。

旁注，仅当在我的视网膜显示屏上使用该应用程序时，我才收到关于 Firefox 中视网膜显示的额外 NS_ERROR_FAILURE 错误。当我在正常屏幕上打开它时，该特定错误消失了，但其余错误仍然存​​在。

【问题讨论】：

我创建了一个sample 参考Chart.js official sample code 并使用Chart.js 2.8.0 版本，代码在我的机器上运行良好（使用Microsoft Edge 44..18362.1.0版本、Chrome、Firefox 70.0（64 位）版本和 IE 浏览器）。你可以在你的机器上测试它。如果仍然无法正常工作，请尝试清除浏览器数据并重置浏览器设置。此外，您能否发布足够的代码来重现问题，如Minimal, Complete, and Verifiable example。

【参考方案1】：

我在翻阅了许多存档的github comments 后找到了答案。显然，您不能将canvas 设置为固定高度，设置responsive: true 和maintainaspectratio: false。当我更改这些参数中的任何一个时，错误就消失了。