Javascript 你能在ChartJS中添加一个永久性标签，显示散布点上方的Y值吗？

我试图在永久框中显示散点图点上方的Y值。它应该看起来像这个黑盒子（忽略红线）

所以我基本上有两个点来创建垂直的蓝线，在蓝线的顶部，我想显示顶部点的Y值。这样的事情可能吗

以下是JS：

var ctx = document.getElementById("myChart").getContext("2d");

//Adding functionality to add vertical line

// Create gradient
    grd = ctx.createLinearGradient(0, 400.000, 0, 100.000);

// Add colors
    grd.addColorStop(0.000, 'rgba(0, 255, 0, 1.000)');
    grd.addColorStop(0.200, 'rgba(191, 255, 0, 1.000)');
    grd.addColorStop(0.400, 'rgba(221, 255, 0, 1.000)');
    grd.addColorStop(0.600, 'rgba(255, 229, 0, 1.000)');
    grd.addColorStop(0.800, 'rgba(255, 144, 0, 1.000)');
    grd.addColorStop(1.000, 'rgba(255, 50, 0, 1.000)');




    var data = {
        labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
        datasets: [
            {
                lineTension: 0,
                backgroundColor: 'rgba(0, 0, 0, 0)',
                borderCapStyle: 'butt',
                borderColor: "red",
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                borderWidth: 4,
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointRadius: 0,
                pointBorderWidth: 0,
                pointHoverRadius: 0,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 0,
                pointHitRadius: 0,
                data: [ {x: 0, y: 1300}, {x: 12, y: 1300}],
                showLines: false,
            },
            {
                lineTension: 0,
                backgroundColor: 'rgba(0, 0, 0, 0)',
                borderCapStyle: 'butt',
                borderColor: "#42bff4",
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                borderWidth: 4,
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointRadius: 0,
                pointBorderWidth: 0,
                pointHoverRadius: 0,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 0,
                pointHitRadius: 0,
                data: [ {x: 13, y: 0}, {x: 13, y: 1100}],
                showLines: false,
            },
            {
                lineTension: 0,
                backgroundColor: grd,
                borderCapStyle: 'butt',
                borderColor: "rgba(0, 0, 0, 0)",
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointRadius: 0,
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointHitRadius: 10,
                data: [{x: 0, y: 0}, {x: 1, y: 100}, {x: 2, y: 250}, {x: 3, y: 400}, {x: 4, y: 400}, {x: 5, y: 400}, {x: 6, y: 500}, {x: 7, y: 700}, {x: 8, y: 900},
                    {x: 9, y: 1000}, {x: 10, y: 1000}, {x: 11, y: 1300}, {x: 12, y: 1300}, {x: 13, y: 1100},],
                spanGaps: false,
            },
            {
                lineTension: 0,
                backgroundColor: '#ededed',
                borderCapStyle: 'butt',
                borderColor: "rgba(0, 0, 0, 0)",
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointRadius: 0,
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointHitRadius: 10,
                data: [{x: 0, y: 0}, {x: 1, y: 100}, {x: 2, y: 250}, {x: 3, y: 400}, {x: 4, y: 400}, {x: 5, y: 400}, {x: 6, y: 500}, {x: 7, y: 700}, {x: 8, y: 900},
                    {x: 9, y: 1000}, {x: 10, y: 1000}, {x: 11, y: 1300}, {x: 12, y: 1300}, {x: 13, y: 1100}, {x: 14, y: 900}, {x: 15, y: 700}, {x: 16, y: 500}, {x: 17, y: 300},
                    {x: 18, y: 100}, {x: 19, y: 50}, {x: 20, y: 0}],
                spanGaps: false,
            },
        ]
    };


    var myChart = new Chart(ctx, {
        type: 'scatter',
        data: data,
        options: {
            elements: {
                point: {
                    radius: 0,
                }
            },
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    display: false,
                    ticks: {
                        beginAtZero:true,
                        callback: function(value, index, values) {
                            return value + '°';
                        },
                        mirror: true,
                    },
                    gridLines: {
                        display: false,
                        drawBorder: false,

                    },
                }],
                xAxes: [{
                    type: 'linear',
                    position: 'bottom',
                    display: true,
                    gridLines: {
                        display: false,
                        zeroLineColor:"black",
                        color: "black"
                    },
                    ticks: {
                        display: false
                    }
                }]
            },
            // annotation: {
            //     drawTime: 'afterDatasetsDraw',
            //     events: ['click'],
            //     dblClickSpeed: 350,
            //     annotations: [{
            //         drawTime: 'afterDraw', // overrides annotation.drawTime if set
            //         id: 'a-line-1', // optional
            //         type: 'line',
            //         mode: 'horizontal',
            //         scaleID: 'y-axis-0',
            //         value: '1300',
            //         borderColor: 'red',
            //         borderWidth: 2,
            //
            //         // Fires when the user clicks this annotation on the chart
            //         // (be sure to enable the event in the events array below).
            //         onClick: function(e) {
            //             // `this` is bound to the annotation element
            //         }
            //     }]
            // },


        },
    });

---

这是一张我的图表

你可以看一看，这似乎只适用于饼图。查看工具提示文档，特别是外部（自定义）工具提示部分，它应该允许你编写一些代码来实现你的目标。