大家好，
我想請問chart.js長條圖，每條bar上面的數字，
要如何顯示呢? 示意圖如下:

我使用的版本是chart.js v3。
環境是Vite、Vue3。
這是我的程式碼:

<script setup>
    import { onMounted,ref } from '@vue/runtime-core';
    import Chart from 'chart.js/auto';

    const data1 = ref([1000,1200,500])
    const label1 = ref(["P1","P2","P3"])

    //測試
    const testData = ref([12, 19, 3])
  
    onMounted(()=>{
        var canvas = document.getElementById("myChart");
        var ctx = canvas.getContext("2d")

        // 通過 createLinearGradient 創建 CanvasGradient 對象
        var gradientStroke = ctx.createLinearGradient(0, 0, 0, 150);
        // 定義漸變的 偏移 和 顏色
        gradientStroke.addColorStop(0, "#00FFFF");
        gradientStroke.addColorStop(1, "#75d1b8");

        var chartData = {
            labels: label1.value,
            datasets: [{
                label: '',
                data: data1.value,
                backgroundColor: gradientStroke,//漸變色
                barPercentage: 0.8,
                borderColor:'#75d1b8',
                borderWidth: 1,
            }]
        }
        const myChart = new Chart(ctx, {
            type: 'bar',
            data:chartData,
            options: {
                responsive: true,
                plugins: {
                    legend:false,
                    title: false
                },
                scales: {
                    y: {
                        ticks: {
                            beginAtZero:true,//從0開始
                            color: 'white'
                        },
                        grid:{
                            borderColor:'white'
                        },
                        suggestedMax: 3000//顯示的區間，超出會自動調整
                    },
                    x: {
                        ticks: {
                            color: 'white'//x軸標籤顏色
                        },
                        grid:{
                            borderColor:'white',//x軸顏色
                            color:'white',//網格線顏色
                        }
                    }
                },
                animation:{
                    onComplete : function(){
                        //在這裡，使用fillText讓bar的數據顯示在bar上
                    }
                }
            }
        });
        //修改data
        var changeData = document.getElementById("changeData");
        changeData.addEventListener('click',()=>{
            myChart.data.datasets[0].data = testData.value
            myChart.update()
        })
    })
</script>

<template>
    <button id="changeData">改變data</button>
    <canvas id="myChart" width="1030" height="240"></canvas>
</template>

網路上找到一些資料，發現是v2版本的
我試著套用、修改，還是沒辦法TT
懇請大大幫忙~

//v2版本
 onComplete: function () {
    var chartInstance = this.chart,
        ctx = chartInstance.ctx;
        ctx.textAlign = 'center';
        ctx.fillStyle = "rgba(0, 0, 0, 1)";
        ctx.textBaseline = 'bottom';
        // Loop through each data in the datasets
        this.data.datasets.forEach(function (dataset, i) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            meta.data.forEach(function (bar, index) {
                var data = dataset.data[index];
                ctx.fillText(data, bar._model.x, bar._model.y - 5);
            });
        });
    }

【已解決】使用方法:下載npm i chartjs-plugin-datalabels@next

//(1)import
import ChartDataLabels from 'chartjs-plugin-datalabels';

const ctx = document.getElementById('myChart');
ctx.width = 200;
ctx.height = 200;
//(2)註冊
Chart.register(ChartDataLabels); 

const myChart = new Chart(ctx, {
    type: 'bar',
    // (3)註冊 plugin,
    plugins: [ChartDataLabels], 
    data: {......},
    options: {
        bezierCurve : false,
        animations:false,
        scales: {
            y: {
                beginAtZero: true
            }
        },
        //(4) 新增 plugins
        plugins: {
            datalabels: {
                anchor: 'end', 
                align: 'end',
                formatter: (val) => (`${val}%`),
                labels: {
                    value: {
                        color: 'blue'
                    }
                }
            }
        }
    }
}