Chart.js проблема с отображением границ Microsoft

Question

Я создал смешанную диаграмму с помощью библиотеки chart.js, к сожалению, при тестировании скрипта в Microsoft Edge или Safari диаграмма не отображается должным образом, линии почти не видны, легенда почти полностью скрыта, если не зависает, оси также имеют оченьплохие ярлыки.

Есть ли способ решить проблему?Важно отметить, что у меня была та же проблема с использованием d3.js.Сначала я думал, что это SVG вызывает эту проблему, но затем chart.js использует canvas, и проблема все еще возникает.

https://vantrilio.github.io/charts/ - мой пример

---

Экраны для сравнения

Google Chrome - здесь все правильно:

Microsoft edge - легенда исчезла, метки осей очень тонкие, линейная диаграмма едва видна:

Safari - легенда исчезла, линейный график едва виден:

Есть ли способ решить проблему?

Answer 1

Хорошо. Я исправил проблему, для проблемы с линейной диаграммой было достаточно переключиться с цветов 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,

        }
  }]
},

Answer 2

Возможно, что нижеприведенные причины вызывают эту проблему.

-> IE и Edge не поддерживают globalAlpha для drawImage графики SVG.
-> IE 10 canvas не поддерживает setLineDash или lineDashOffset.

-> В IE 11 canvas.toDataURL () не работает, если на холсте есть изображения с источниками данных URI.

Ссылка:

Canvas (базовая поддержка)

Chart JS

Вам необходимо связаться с Chart JS для поддержки.Эта библиотека разработана ими.поэтому они могут быть доступны с любым решением для этого.