web-dev-qa-db-ja.com

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

ChartJSを使用して一部のデータを表示していますが、IE、Firefox、Safariでcanvas要素が正しくレンダリングされていません。

私の推測では、背景色のプロパティはChromeで正常に機能するため、他のブラウザで使用されているプレフィックスがありません。

他の誰かがこの問題を抱えていましたか？

Chrome：

enter image description here

Firefox、Safari、IE：enter image description here

コード：

    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
                        }
                    }]
                }
            }
        });
    };
    });
javascriptcanvaschart.jsrgba
12
andromedainiative

問題は、backgroundColorプロパティに単一の配列ではなくColorの配列を与えていることです。

fillプロパティが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)',

そしてそれはあなたに この結果 あなたが使っているどんなブラウザでも与えるでしょう。
（テストはIE 11およびFirefox48）で行われました

enter image description here

11
tektiv

私の場合、私はrgbを使用していました

backgroundColor: 'rgb(33, 145, 81, 0.2)',
borderColor: 'rgb(255, 134, 25, 1)',

rgbaの代わりに

backgroundColor: 'rgba(33, 145, 81, 0.2)',
borderColor: 'rgba(255, 134, 25, 1)',
3
Casper Witting