Le canvas ChartJS n'affiche pas les couleurs rgba dans IE, Safari et Firefox

Question

Im utilisant ChartJS pour afficher certaines données mais cela ne rend pas correctement l'élément canvas dans IE, Firefox et Safari.

Ma conjecture est que la propriété de couleur d'arrière-plan manque l'un des préfixes utilisés pour l'autre navigateur, car il fonctionne très bien dans Chrome.

Quelqu'un d'autre a eu ce problème?

Chrome:

Firefox, Safari et IE:

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

Answer 1

Le problème est que vous donnez la backgroundColor propriété un tableau de Color au lieu d'un seul.

Le graphique à courbes, avec la propriété fill définie sur true, doit avoir un seul Color, sinon il se cassera comme sur votre graphique.

---

Vous avez juste besoin de changer de:

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

Pour:

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

Et il vous donnera this result quel que soit le navigateur que vous utilisez.
(essais ont été effectués sur IE 11 et Firefox 48)