ChartJS canvas 在 IE、Safari 和 Firefox 中不显示 rgba 颜色

Question

我正在使用 ChartJS 显示一些数据，但它无法在 IE、Firefox 和 Safari 中正确呈现 canvas 元素。

我的猜测是背景颜色属性缺少其他浏览器使用的任何前缀，因为它在 Chrome.

中工作正常

还有其他人遇到过这个问题吗？

Chrome:

Firefox、Safari 和 IE：

代码：

    window.onload = function() {
        var ctx = document.getElementById("canvas");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
                datasets: [{
                    label: '# of Value',
                    data: [12, 19, 3, 5, 2, 3, 10, 29],
                    backgroundColor: [
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)'
                    ],
                    borderColor: [
                        'rgba(33, 145, 81, 1)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });
    };
    });

Answer 1

问题是您给 backgroundColor 属性一个 Color 数组而不是一个数组。

折线图，fill 属性设置为 true 需要只有一个 Color，否则它会像您的图表上那样损坏.

所以你只需要从 :

backgroundColor: [
    'rgba(33, 145, 81, 0.2)',
    'rgba(33, 145, 81, 0.2)',
    'rgba(33, 145, 81, 0.2)',
    'rgba(33, 145, 81, 0.2)',
    'rgba(33, 145, 81, 0.2)',
    'rgba(33, 145, 81, 0.2)',
    'rgba(33, 145, 81, 0.2)',
    'rgba(33, 145, 81, 0.2)'
],

收件人：

backgroundColor: 'rgba(33, 145, 81, 0.2)',

它会给你 this result 无论你使用什么浏览器。
（测试是在 IE 11 和 Firefox 48 上完成的）

Answer 2

就我而言，我使用的是 rgb

backgroundColor: 'rgb(33, 145, 81, 0.2)',
borderColor: 'rgb(255, 134, 25, 1)',

而不是rgba

backgroundColor: 'rgba(33, 145, 81, 0.2)',
borderColor: 'rgba(255, 134, 25, 1)',

Answer 3

我对单线图（不是多线）的颜色有疑问。 Chrome 具有精美的图形显示，但在 IE 中检查时。它显示灰色线。除了这张图之外，IE 中的图表还提供了背景白色 space。由于问题与折线图的颜色有关，我只回答这些。

更改 borderColor: 部分如下所示，
边框颜色： [ '#587ce4' ]
如果您使用的是传奇。也进行以下更改，使线条颜色看起来相似，
背景颜色： [ '#587ce4' ]

ChartJS canvas 在 IE、Safari 和 Firefox 中不显示 rgba 颜色

ChartJS canvas not displaying rgba colors in IE, Safari and Firefox

javascript

canvas

rgba

chart.js