如何在Chart.js v3中在线条末尾显示数据集标签？

问题描述 #

我使用Chart.js v3开发了折线图，当前图表仅显示两条折线，已隐藏图例，希望在每条折线的末尾分别显示“Line 1”和“Line 2”标签，相关原始代码如下：

<!DOCTYPE html>
<html>
<head>
    <title> Example</title>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'Line 1',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 2
                },
                {
                    label: 'Line 2',
                    data: [28, 48, 40, 19, 86, 27, 90],
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 2
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: false
                }
            }
        });
    </script>
</body>
</html>

解决方案 #

通过自定义Chart.js插件，借助afterDraw钩子在图表绘制完成后，定位每条折线的最后一个数据点并绘制对应标签。修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <title> Example</title>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'Line 1',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 2
                },
                {
                    label: 'Line 2',
                    data: [28, 48, 40, 19, 86, 27, 90],
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 2
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: false
                }
            },
            // 注册自定义插件实现末尾标签绘制
            plugins: [{
                id: 'customLineLabels',
                afterDraw: function(chart) {
                    chart.data.datasets.forEach(function(dataset, index) {
                        // 获取数据集的坐标元数据
                        var meta = chart.getDatasetMeta(index);
                        // 定位最后一个数据点
                        var lastPoint = meta.data[meta.data.length - 1];
                        if (lastPoint) {
                            var x = lastPoint.x;
                            var y = lastPoint.y;
                            // 设置文本样式
                            chart.ctx.font = '14px Arial';
                            chart.ctx.fillStyle = dataset.borderColor;
                            // 在数据点右侧绘制标签，添加偏移量避免重叠
                            chart.ctx.fillText(dataset.label, x + 10, y + 5);
                        }
                    });
                }
            }]
        });
    </script>
</body>
</html>

关键说明 #

• 自定义插件通过afterDraw钩子触发，确保在图表全部绘制完成后再添加标签，避免被覆盖
• 利用chart.getDatasetMeta(index)获取对应数据集的像素坐标信息，精准定位最后一个数据点
• 文本颜色与折线边框色保持一致，添加横向和纵向偏移量，避免标签与折线或数据点重叠

内容的提问来源于stack exchange，提问作者Volatil3