Question

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

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

其他人有这个问题吗？

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

问题在于，您为@RunWith(Parameterized.class) public class FirstTest { private LoginCredentials loginData; public FirstTest(LoginCredentials testData) { loginData = testData; } @Parameterized.Parameters public static LoginCredentials[] generateTestData() { return ReadingExcelSheets.generateTestData(); }属性提供了一个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)'
],

它将为您提供this result您正在使用的任何浏览器 （测试在IE 11和Firefox 48上完成）

Answer 2

就我而言，我正在使用position:fixed

rgb

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

rgba

Answer 3

我对单线图（不是多线图）的颜色有疑问。 Chrome浏览器具有很好的图形显示效果，但是在IE中进行了检查。它显示灰色线。除了这张图，它超出了IE中为图表提供的背景空白。由于问题与折线图的颜色有关，因此我仅回答这些问题。

更改borderColor：如下所示的部分，
边框颜色： [ '＃587ce4' ]
如果您使用的是图例。也进行以下更改以使线条颜色看起来相似，
背景颜色： [ '＃587ce4' ]

ChartJS画布不在IE，Safari和Firefox中显示rgba颜色

3 个答案: