ChartJSキャンバスがIE、Safari、Firefoxでrgba色を表示しない

Question

Im ChartJSを使用してデータを表示していますが、IE、Firefox、Safariでキャンバス要素を正しく描画していません。

私の推測では、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の配列です。

プロパティがtrueに設定されている折れ線グラフは、Colorの1つだけ必要です。そうしないと、チャート上のように折れてしまいます。

---

だから、ちょうどから変更する必要がありますに

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

そして、それはあなたが使用しているものは何でもブラウザあなたにthis resultを与えるだろう。
（テストはIE 11とFirefox 48で行った）