ChartJS Canvas zeigt keine RGBA Farben in IE, Safari und Firefox

Question

Ich benutze ChartJS um einige Daten anzuzeigen, aber es rendert das Canvas Element nicht korrekt in IE, Firefox und Safari.

Meine Vermutung ist, dass die Hintergrundfarbe Eigenschaft keine der verwendeten Präfixe für den anderen Browser fehlt, da es in Chrome funktioniert.

Hat jemand anderes dieses Problem?

Chrome:

Firefox, Safari und IE:

Der 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

Das Problem ist, dass Sie die geben backgroundColor Eigenschaft ein Array von Color statt einer einzigen.

Das Liniendiagramm mit der fill -Eigenschaft, die auf true festgelegt ist, muss nur eine Color haben, sonst wird es wie bei Ihrem Diagramm brechen.

---

So brauchen Sie nur von sich ändern:

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

An:

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

Und es wird Ihnen this result geben, was Browser Sie verwenden.
(Tests wurden an IE getan 11 und die folgenden 48)