vue.js - Chart.JS 根据X轴值获取Y轴值

Question

需要一些指导。我有一张显示全天潮汐时间的图表。

我需要做的是根据当前时间在曲线上标记高度（Y 轴）：

例如，如果时间是 14:00

这是我的代码：

const chart = new Chart(this.$refs.myChart, {
                    type: "line",
                    data: {
                        labels,
                        datasets: [
                            {
                                data,
                                tension: 0.5,
                                backgroundColor: "rgb(31,89,112,0.5)",
                                borderColor: "rgb(31,89,112,1)",
                                fill: {
                                    target: "origin",
                                },
                            },
                        ],
                    },
                    options: {
                        interaction: {
                            mode: "point",
                        },
                        hover: {
                            mode: "point",
                        },
                        onHover: (e) => {
                            const canvasPosition = getRelativePosition(e, chart);

                            // Substitute the appropriate scale IDs
                            const dataX = chart.scales.xAxis.getValueForPixel(
                                canvasPosition.x
                            );
                            const dataY = chart.scales.yAxis.getValueForPixel(
                                canvasPosition.y
                            );
                            // console.log(dataY);
                        },
                        plugins: {
                            tooltip: {
                                enabled: true,
                                callbacks: {
                                    label: function(context) {
                                        var label = context.dataset.label || "";

                                        if (label) {
                                            label += ": ";
                                        }
                                        if (context.parsed.y !== null) {
                                            label += context.parsed.y + "m";
                                        }
                                        return label;
                                    },
                                },
                            },
                            legend: {
                                display: false,
                            },
                        },
                        scales: {
                            xAxis: {
                                type: "time",
                                min: new Date(date), // Should calculate this dynamic, not best way but can use: new Date().setHours(0,0,0,0)
                                max: new Date(date + (86400000 - 1000)),
                                time: {
                                    unit: "hour",
                                    stepSize: 2,
                                    displayFormats: {
                                        hour: "HH:mm",
                                    },

                                    // minUnit: moment(1634860800000).format("HH:mm"),
                                },
                                ticks: {
                                    major: true,
                                },
                            },
                            yAxis: {
                                ticks: {
                                    callback: function(value, index, values) {
                                        return value + "m";
                                    },
                                },
                            },
                        },
                    },
                });

任何想法如何实现红点。我尝试添加第二个数据集，但这不遵循曲线（因为曲线是由生成的tension: 0.5）？

提前致谢！

编辑 这是 var 数据和 var 标签中的示例

var labels = [
'2021-11-04T05:26:52.5',
'2021-11-04T11:21:06.667',
'2021-11-04T17:55:52.5',
'2021-11-04T23:47:30',
'2021-11-05T06:11:37.5'
]; // Times

var data = [
0.9,
5.3,
0.4,
5.4,
0.8
]; // Heights

标签： vue.jschartschart.js