ChartJS 在 IE、Safari 和 Firefox 中无法显示 rgba 颜色的 canvas。

Question

我正在使用ChartJS来显示一些数据，但在IE、Firefox和Safari中无法正确地渲染画布元素。

我的猜测是背景颜色属性缺少其他浏览器所使用的前缀，因为在Chrome中它可以正常工作。

还有人遇到过这个问题吗？

Chrome:

Firefox，Safari和IE：{{link1：}}

代码：

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

- andromedainiative

---

数据中的数组元素应为字符串：data: ["12", "19", "3", "5", "2", "3", "10", "29"] - d_z90

Answer 1

问题在于你给 backgroundColor 属性提供了一个 Color 数组，而不是单个颜色。

折线图的 fill 属性设置为 true 时，需要仅有一个 Color，否则它会像你的图表一样出现问题。

---

所以你只需要改成：

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和Firefox 48上进行)

- tektiv

---

完美！谢谢。 - andromedainiative

谢谢你的回答。这在文档中提到了吗？我也遇到了同样的问题，我的示例直接来自chat.js的网站。不确定为什么他们会给出不能完全在所有浏览器上工作的示例？ - Scott

@Scott 文档中没有提到，但我不记得有任何混合线图和几种颜色的示例，就像问题所问的那样。你用了哪个例子？ - tektiv

@tektiv，我也遇到了同样的问题。对于折线图使用_String value_，而对于柱状图使用_Array_是可以正常工作的。如最新文档所示（http://www.chartjs.org/docs/latest/）： ... type: 'bar', data: { data: [12, 19, 3, 5, 2, 3], backgroundColor: ['rgba(255, 99, 132, 0.2)'] }, ... 或者 ... type: 'line', data: { data: [12, 19, 3, 5, 2, 3], backgroundColor: 'rgba(255, 99, 132, 0.2)' }, ... - wdonet

@tektiv，我的意思就是这样，对于条形图，我们需要多种颜色，而对于折线图只需要一种。文档上也是这么说的。 :) - wdonet

Answer 2

在我的情况下，我正在使用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)',

- Casper Witting

Answer 3

我遇到了单线图（非多线）颜色的问题。在Chrome中，图表呈现良好，但在IE中检查时，它显示灰色线条。除此之外，图表在IE中超出了提供的白色背景空间。由于问题与线状图的颜色有关，因此我只回答这些问题。

像下面这样更改borderColor部分，
borderColor：[ '#587ce4' ]
如果您正在使用图例，请进行以下更改以使线条颜色类似，
backgroundColor：[ '#587ce4' ]

- Anup Prakash