Question

我正在使用一种涉及不同颜色的饼图。该图表在Chrome上看起来不错，但在Edge浏览器上，该图表看起来为灰色，并且不同的部分不可区分。我检查了ChartJS canvas not displaying rgba colors in IE, Safari and 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

从the Link（在原始帖子中发布）中，我们可以看到您使用的是折线图，而不是饼图。使用折线图时，如果我们设置多种颜色，它将覆盖该颜色，因此该图表看起来是灰色的。

如果要使用饼图显示多种颜色和不同的别名，请参考以下示例代码：

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的更多详细信息，请检查chart document。

ChartJS画布在边缘浏览器中不显示颜色

1 个答案: