如何在React中实现带有滑动点标记的折线图？

Question

我在我的React应用程序中需要一个可以在整个直线上滑动的点的图形。 我尝试使用Highcharts实现此目的，但是我只能找到与整个系列相关的文档。

下面显示的是一些我用作HighCharts尝试实现拖动效果的选项的代码。当前拖曳点适用于图形上的所有点，而不是指定点。它还重绘了整条线，而不是在其上滑动。

    const options = {

        title: {
            text: 'Example line graph'
        },
        series: [{
            showInLegend: false,
            type: 'spline',
            data: array,
            dragDrop: {
                draggableX: true,
                draggableY: true,
                dragMinY: 0,
                dragMinX: 0,

                dragPrecisionX: 1,
                dragPrecisionY: 1,
                liveRedraw: false
            }
        }],
        xAxis: {
            title: {
                text: 'Distance'
            }
        },
        yAxis: {
            title: {
                text: 'Hours'
            }
        }
    }

此视频显示了我想要的示例：https://youtu.be/9Yh5AV9eNKk?t=89 但是，这是在React本机中实现的，我不确定如何在React中重现它。