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

Question

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

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

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

---

要比较的屏幕

Google Chrome - 这里的一切都是正确的:

Microsoft edge - 图例消失了，轴标签非常薄，折线图几乎看不见:

Safari - 图例不见了，折线图几乎看不见:

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

Answer 1

可能是以下原因造成的。

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

-> 在 IE 11 canvas.toDataURL() 中如果 Canvas 有图像则不起作用 带有数据 URI 源。

引用:

Canvas (basic support)

Chart JS

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