如何在Highcharts中创建可拖动的绘图线？

如何在海图中创建可拖动的绘图线？我找不到这方面的信息。请看截图。您将在屏幕截图上看到一条绿线。该绘制线必须在X轴上定向，并可在轴Ⅹ上拖动最大值和最小值。你能帮助我吗？可能是一些建议或官方文件的链接。提前谢谢你。

请看一些简短的视频

---

您只需使用

Highcharts.svgrender

类渲染

rect

元素，然后处理适当的事件，以更改拖动时的线位置。在

chart.events.load

handler上应该能够实现所有功能。下面是一个示例代码：

  load() {
    var chart = this,
      lineWidth = 2,
      draggablePlotLine = chart.renderer.rect(100, chart.plotTop, lineWidth, chart.plotHeight)
      .attr({
        fill: 'blue'
      })
      .add();

    chart.container.onmousemove = function(e) {
      if (draggablePlotLine.drag) {
        let normalizedEvent = chart.pointer.normalize(e),
          extremes = {
            left: chart.plotLeft,
            right: chart.plotLeft + chart.plotWidth
          };

        // Move line
        if (
          e.chartX >= extremes.left &&
          e.chartX <= extremes.right
        ) {
          draggablePlotLine.attr({
            x: e.chartX
          })
        }
      }
    }

    draggablePlotLine.element.onmousedown = function() {
      draggablePlotLine.drag = true
    }

    draggablePlotLine.element.onmouseup = function() {
      draggablePlotLine.drag = false
    }

  }

load（）{
var图表=此，
线宽=2，
DragTablePlotLine=chart.renderer.rect（100，chart.plotTop，线宽，chart.plotHeight）
艾特先生({
填充：“蓝色”
})
.add（）；
chart.container.onmousemove=函数（e）{
如果（DragTablePlotLine.drag）{
让normalizeEvent=chart.pointer.normalize（e），
极端={
左：chart.plotLeft，
右：chart.plotLeft+chart.plotWidth
};
//移动线
如果(
e、 chartX>=极端值。左&&
e、 chartX这不是我要求的。我已经知道这种可能性。但无论如何，谢谢！！！因此，我建议你使用
可拖动点
插件。我几乎可以肯定，这将产生与视频和屏幕截图完全相同的效果。下面是一个例子：太棒了！！！感谢你的时间。这个关于JSFIDLE的例子很有帮助我！！！在这之前，我不能自己实现它！