问题描述

Im using ChartJS to display some data but it's not rendering the canvas element correctly in IE, Firefox and Safari.

My guess is that the background color property lacks any of the used prefixes for the other browser since it works fine in Chrome.

Anyone else had this issue?

Chrome:

Firefox, Safari and IE:

The code:

    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
                        }
                    }]
                }
            }
        });
    };
    });

The problem is that you're giving the backgroundColor property an array of Color instead of a single one.

The line chart, with the fill property set to true needs to have only one Color, or else it will break like it does on your chart.

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)'
],

To :

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

And it will give you this result whatever browser you are using.
(tests were done on IE 11 and Firefox 48)

这篇关于ChartJS 画布在 IE、Safari 和 Firefox 中不显示 rgba 颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！