ChartJS画布不在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)',

无论您使用什么浏览器,它都会为您提供此结果.
(测试在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)',