Question

我正在尝试生成条形图，但是在生成后，当我将鼠标悬停在第一个条形图上时，悬停工作并且工具提示也正确显示，但是当我将鼠标悬停在第二个或第三个条形上时，条形颜色变为黑色

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="barChart" style="margin-top:10px"></canvas>

var ctxBarChart = document.getElementById('barChart').getContext('2d');
var chart = new Chart(ctxBarChart, {
        // The type of chart we want to create
        type: 'bar',

        // The data for our dataset
        data: {
            labels: ['bar 1', 'bar 2', 'bar 3'],
            datasets: [{
                label: 'bar graph label',
                backgroundColor: ['#ff7f27', 'DodgerBlue', 'Green'],
                borderColor: ['#ff7f27', 'DodgerBlue', 'Green'],
                data: [24.6154, 28.4, 28.4]
            }]
        },

        // Configuration options go here
        options: {
            legend: {
                display: false
            },
            tooltips: {
                callbacks: {
                    label: function (tooltipItem, data) {
                        return tooltipItem.yLabel.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + '%';
                    }
                }
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        // max: 100,
                        min: 0,
                        // stepSize:20
                    }
                }]
            }
        }
    });

但是我得到的结果是这样的，请参见下面的第1条和第2条图像

Answer 1

这似乎是由于颜色名称区分大小写引起的。

将颜色更改为所有小写，如下所示：

backgroundColor: ['#ff7f27', 'dodgerblue', 'green'],
borderColor: ['#ff7f27', 'dodgerblue', 'green'],

CSS3 specification explicitly states的名称不区分大小写，因此它看起来像Chart.js中的错误

在悬停条上被标签chartjs覆盖

1 个答案: