ChartJS画布不在IE，Safari和Firefox中显示rgba颜色 [英] ChartJS canvas not displaying rgba colors in IE, Safari and Firefox

问题描述

我使用ChartJS来显示一些数据，但它不能在IE，Firefox和Safari中正确渲染canvas元素。

我的猜测是背景颜色属性缺少其他浏览器使用的任何前缀，因为它在Chrome中运行良好。

其他人有这个问题吗？

Chrome ：

Firefox，Safari和IE：

代码：

  window.onload = function（）{
 var ctx =的document.getElementById（ 画布）; 
 var myChart =新图表（ctx，{
类型：'line'，
数据：{
 labels：[Jan，Feb，Mar， 4月，May，Jun，Jul，Aug]，
数据集：[{
 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 
}] 
}，
期权：{
比例：{
 yAxes：[{
 ticks：{
 beginAtZero：true 
} 
}] 
} 
} 
 }）; 
}; 
}）; 
  

解决方案

问题是你给的是 backgroundColor 属性数组颜色而不是单个数组。

折线图， fill 属性设置为 true 只需要一个颜色，否则它会像你的图表一样破裂。

---

所以你只需要改变：

  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）'，
  

它会给你

Im using ChartJS to display some data but it's not rendering the canvas element correctly in IE, Firefox and Safari.

My guess is that the background color property lacks any of the used prefixes for the other browser since it works fine in Chrome.

Anyone else had this issue?

Chrome:

Firefox, Safari and IE:

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

解决方案

The problem is that you're giving the backgroundColor property an array of Color instead of a single one.

The line chart, with the fill property set to true needs to have only one Color, or else it will break like it does on your chart.

---

So you just need to change from :

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

To :

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

And it will give you this result whatever browser you are using.
(tests were done on IE 11 and Firefox 48)

这篇关于ChartJS画布不在IE，Safari和Firefox中显示rgba颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！