javascript - Chart.js 微软边缘显示问题

Question

我使用 chart.js 库创建了一个混合图表，不幸的是，在 Microsoft Edge 或 Safari 上测试脚本时，图表无法正确显示，线条几乎不可见，图例几乎完全隐藏，除非悬停，轴的标签也很差。

有没有办法解决这个问题？值得一提的是，我在使用 d3.js 时遇到了同样的问题。起初我认为是 SVG 导致了这个问题，但后来 chart.js 使用了画布，问题仍然存在。

https://vantrilio.github.io/charts/ - 我的例子

---

要比较的屏幕

谷歌浏览器 - 这里一切都是正确的：

Microsoft 边缘 - 图例消失了，轴标记非常细，折线图几乎不可见：

Safari - 图例消失了，折线图几乎看不到：

有什么办法可以解决问题吗？

标签： javascriptcanvaschartschart.jsmicrosoft-edge

Answer 1

以下原因可能会导致此问题。

-> IE 和 Edge 不支持 SVG 图形的 drawImage 的 globalAlpha。
-> IE 10 画布不支持 setLineDash 或 lineDashOffset。

-> 在 IE 11 中，如果画布包含带有数据 URI 源的图像，canvas.toDataURL() 将不起作用。

参考：

画布（基本支持）

图表 JS

您需要联系 Chart JS 以获得支持。这个库是他们开发的。所以他们可能会为此提供任何解决方案。