Chartjs:悬停条形图时在html元素中显示值

Chart.js是一个流行的JavaScript图表库，用于在网页中创建各种类型的图表，包括条形图、折线图、饼图等。它具有简单易用的API和丰富的功能，可以帮助开发人员快速创建交互式和可视化的图表。

对于悬停条形图时在HTML元素中显示值，可以通过Chart.js的回调函数来实现。具体步骤如下：

首先，需要在HTML页面中引入Chart.js库。可以通过以下CDN链接引入：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

在HTML页面中创建一个canvas元素，用于显示图表：

<canvas id="myChart"></canvas>

在JavaScript代码中，使用Chart.js创建图表，并设置悬停时显示值的回调函数：

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['数据1', '数据2', '数据3'],
        datasets: [{
            label: '数据集',
            data: [10, 20, 30],
            backgroundColor: 'rgba(0, 123, 255, 0.5)'
        }]
    },
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem) {
                    return tooltipItem.yLabel;
                }
            }
        }
    }
});

在上述代码中，我们创建了一个条形图，并设置了悬停时显示值的回调函数。回调函数中的tooltipItem.yLabel表示当前悬停的条形图的值。