chart.js条形图数据标签在悬停在图表上时消失

基础概念

Chart.js 是一个基于 HTML5 Canvas 的 JavaScript 图表库，用于创建各种类型的图表，包括条形图、折线图、饼图等。条形图是一种常用的图表类型，用于展示分类数据的比较。

类型

Chart.js 支持多种图表类型，包括：

条形图（Bar Chart）
折线图（Line Chart）
饼图（Pie Chart）
散点图（Scatter Chart）
框图（Box Plot）
水平条形图（Horizontal Bar Chart）

应用场景

条形图广泛应用于各种数据可视化场景，例如：

数据比较
数据趋势分析
分类数据展示
业务指标监控

问题描述

在使用 Chart.js 创建条形图时，数据标签在悬停在图表上时消失。

原因

数据标签在悬停时消失可能是由于以下原因：

配置错误：可能没有正确配置数据标签的显示选项。
插件冲突：可能使用了某些插件或扩展，导致数据标签显示异常。
版本问题：使用的 Chart.js 版本可能存在 bug。

解决方法

以下是一个示例代码，展示如何正确配置 Chart.js 条形图以显示数据标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Bar Chart with Data Labels</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                plugins: {
                    tooltip: {
                        enabled: true,
                        callbacks: {
                            label: function(tooltipItem) {
                                return `Value: ${tooltipItem.raw}`;
                            }
                        }
                    },
                    datalabels: {
                        color: '#000',
                        anchor: 'end',
                        align: 'top',
                        formatter: function(value, context) {
                            return value;
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>