Płaszczyzna ChartJS nie wyświetla kolorów rgba w IE, Safari i Firefox

Question

Używam ChartJS do wyświetlania niektórych danych, ale nie renderuję elementu canvas poprawnie w IE, Firefox i Safari.

Domyślam się, że właściwość koloru tła nie ma żadnego z używanych prefiksów dla drugiej przeglądarki, ponieważ działa ona poprawnie w przeglądarce Chrome.

Ktoś jeszcze miał ten problem?

Chrome:

Firefox, Safari i IE:

Kod:

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

Problemem jest to, że jesteś dając backgroundColor Właściwość tablica z Color zamiast jednego.

Wykres liniowy z właściwością fill ustawioną na true musi mieć tylko jedną wartość: Color, inaczej będzie łamać się tak, jak na wykresie.

---

Więc po prostu trzeba zmienić:

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

Do:

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

A to daje this result niezależnie od używanej przeglądarki.
(badanie przeprowadzono na IE 11 i Firefox 48)