Холст ChartJS не отображает цвета rgba в IE, Safari и Firefox

Я использую ChartJS для отображения некоторых данных, но он неправильно отображает элемент холста в IE, Firefox и Safari.

Я предполагаю, что в свойстве цвета фона отсутствуют какие-либо используемые префиксы для другого браузера, поскольку оно отлично работает в 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
                        }
                    }]
                }
            }
        });
    };
    });

person andromedainiative    schedule 05.09.2016    source источник
comment
Элементы массива внутри данных должны быть строками: data: ["12", "19", "3", "5", "2", "3", "10", "29"]   -  person d_z90    schedule 05.09.2016


Ответы (3)


Проблема в том, что вы даете свойству 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)'
],

To :

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

И это даст вам этот результат в любом браузере, который вы используете.
(тесты проводились на IE 11 и Firefox 48)

введите описание изображения здесь

person tektiv    schedule 05.09.2016
comment
Идеальный! Спасибо. - person andromedainiative; 06.09.2016
comment
Спасибо за Ваш ответ. Это упоминается в документах? У меня были те же проблемы, и мои примеры взяты прямо с веб-сайта chat.js. Не знаете, зачем приводить примеры, которые не полностью работают со всеми браузерами? - person Scott; 06.04.2017
comment
@Scott Это не упоминается в документах, но я не помню ни одного примера смешивания линейных диаграмм и нескольких цветов в соответствии с заданным вопросом. Какой пример вы использовали? - person tektiv; 06.04.2017
comment
@tektiv, то же самое случилось со мной. String value для линейных диаграмм и Array для линейчатых диаграмм отлично работают. Как показано в [последнем документе] (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)' }, ... - person wdonet; 09.08.2017
comment
@wdonet В приведенном вами примере код создает гистограмму, которой требуется несколько цветов, чтобы различать все столбцы. Однако я не могу найти код для создания строки в gitbook, единственная информация о цветах - это необходимый тип, который Color/Color[] и может быть неправильным - person tektiv; 10.08.2017
comment
@tektiv, я имел в виду именно это, для гистограмм нам нужно несколько цветов, а для линейных диаграмм - только один. В документации так сказано. :) - person wdonet; 18.08.2017
comment
Идеальный ответ. Кроме того, массив с одним значением будет работать нормально. - person Sabith; 24.04.2018

В моем случае я использовал 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)',
person Casper Witting    schedule 30.10.2018

У меня проблема с цветом однолинейного графика (не многострочного). Chrome имеет прекрасное графическое представление, но при проверке в IE. Он показывает линию серого цвета. Кроме того, этот график выходит за пределы фонового пробела, предусмотренного для графика в IE. Поскольку вопрос связан с цветом линейной диаграммы, я отвечаю только за них.

Измените раздел borderColor: как показано ниже,
borderColor: [ '#587ce4' ]
Если вы используете Legends. Внесите изменения ниже, чтобы цвет линии выглядел одинаково,
backgroundColor: [ '#587ce4' ]

person Anup Prakash    schedule 21.06.2020