Chart.js Microsoft Edge显示问题

Question

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

是否有解决此问题的方法？值得一提的是，使用d3.js时遇到了同样的问题。起初我以为是SVG引起了这个问题，但后来chart.js使用canvas代替了，出现了问题stil。

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

---

要比较的屏幕

Google Chrome浏览器-此处一切正确：

Microsoft优势-图例消失了，轴标记得很细，折线图几乎看不见：

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

有什么办法解决问题？

Answer 1

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

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

->在IE 11中，如果画布具有图像，canvas.toDataURL（）不起作用    带有数据URI源。

参考：

Canvas (basic support)

Chart JS

您需要与Chart JS联系以获得支持。该库由他们开发。因此他们可能会为此提供任何解决方案。

Answer 2

好，我已经解决了这个问题，对于折线图问题，可以从RGBA切换到十六进制颜色就足够了，仅通过更改字体系列及其粗细就可以修复细字体-与图例相同。

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,

        }
  }]
},