Chart.js 微软边缘显示问题答案

【问题标题】：Chart.js microsoft edge display issueChart.js 微软边缘显示问题
【发布时间】：2019-03-15 07:44:33
【问题描述】：

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

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

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

要比较的屏幕

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

Microsoft edge - 图例消失了，坐标轴标签非常细，折线图几乎不可见：

Safari - 图例消失，折线图几乎不可见：

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

【问题讨论】：

嗨马尔辛！？？？你能分享一下不工作的代码吗？
github.com/vantrilio/charts 这是 :) 它在 Chrome 上运行良好，我的主要问题是在 Microsoft Edge 中显示图表，它看起来完全不同，线条消失了，字体很细，传奇已经完全消失了。
欢迎来到 StackOverflow。请阅读有关如何提出好问题的帮助部分，因为这将有助于社区更好地了解您的问题并为您提供好的答案：stackoverflow.com/help/how-to-ask
最好将相关代码粘贴到您的问题中，而不是让人们通过您的存储库搜索您的问题的确切位置:)

标签： javascript canvas charts chart.js microsoft-edge

【解决方案1】：

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

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

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

参考：

Canvas (basic support)

Chart JS

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

【讨论】：

【解决方案2】：

好的，我已经解决了这个问题，对于折线图问题，从 RGBA 切换到 HEX 颜色就足够了，只需更改字体系列及其重量即可修复细字体 - 与图例相同。

scales: {
  xAxes: [{
    stacked: true,
    barPercentage: 0.6,
    fontStyle: 'bold',
    ticks: {
            fontFamily: "Verdana",
            fontStyle: 400
        }
  }],
  yAxes: [{
    stacked: true,
    fontStyle: "bold",
    fontSize: 80,
    ticks: {
            fontFamily: "Verdana",
            fontStyle: 400,

        }
  }]
},

【讨论】：