Холст ChartJS не отображает цвета в браузере ребер

Question

Я использую круговую диаграмму с разными цветами.Диаграмма отлично выглядит в Chrome, но в браузере Edge диаграмма выглядит серой, и разные разделы не различимы.Я проверил холст ChartJS, не отображающий цвета rgba в IE, Safari и Firefox , принятый ответ состоял в том, чтобы удалить массив цветов, но в моем случае задействовано несколько цветов, а не один.

 public colors = [
 {
  backgroundColor: [
    "rgba(23,43,83)",
    "rgba(226, 229, 232)",
    "rgba(17, 123, 66)",
  ],
  borderWidth: 0,
  hoverBackgroundColor: [
    "rgba(23,43,83)",
    "rgba(226, 229, 232)",
    "rgba(17, 123, 66)",
  ],
  hoverBorderWidth: 0,
},
]

Answer 1

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

Если вы хотите отобразить несколько цветов и псевдонимов с помощью круговых диаграмм, см. Следующий пример кода:

Ссылка JavaScript:

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<style type="text/css">
    /* Chart.js */
    @keyframes chartjs-render-animation {
        from {
            opacity: .99
        }

        to {
            opacity: 1
        }
    }

    .chartjs-render-monitor {
        animation: chartjs-render-animation 1ms
    }

    .chartjs-size-monitor, .chartjs-size-monitor-expand, .chartjs-size-monitor-shrink {
        position: absolute;
        direction: ltr;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        pointer-events: none;
        visibility: hidden;
        z-index: -1
    }

        .chartjs-size-monitor-expand > div {
            position: absolute;
            width: 1000000px;
            height: 1000000px;
            left: 0;
            top: 0
        }

        .chartjs-size-monitor-shrink > div {
            position: absolute;
            width: 200%;
            height: 200%;
            left: 0;
            top: 0
        }
</style>

и

<div id="canvas-holder" style="width:40%">
    <div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
    <canvas id="chart-area" style="display: block; width: 762px; height: 381px;" width="762" height="381" class="chartjs-render-monitor"></canvas>
</div>
<script>
    var randomScalingFactor = function () {
        return Math.round(Math.random() * 100);
    };

    var config = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                ],
                backgroundColor: [
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                'Red',
                'Orange',
                'Yellow',
                'Green',
                'Blue'
            ]
        },
        options: {
            responsive: true
        }
    };

    window.onload = function () {
        var ctx = document.getElementById('chart-area').getContext('2d');
        window.myPie = new Chart(ctx, config);
    };

</script>

Результат, подобный этому:

Подробнее о chart.js, пожалуйста, проверьте документ с диаграммой .