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

Question

如何在 Highcharts 中创建可拖动的情节线？我找不到这方面的信息。请看截图。您将在屏幕截图上看到一条绿线。该绘图线必须面向 xAxis 并可在轴 \xd0\xa5 上拖动最大和最小值。你能帮助我吗？也许是一些建议或官方文档的链接。提前谢谢您。\n屏幕截图

\n\n

另请参阅一些短视频

\n\n

https://drive.google.com/open?id=1sHeIZU1S5M15yxbzKWQrTE44pdrUz7PW

\n

Answer 1

您可以简单地rect使用Highcharts.SVGRenderer类渲染元素，然后处理适当的事件，以更改拖动时的行位置。一切都应该能够在chart.events.loadhandler上实现。这是示例代码：

  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
    }

  }

现场示例： https: //jsfiddle.net/Lnj7ac42/

API 参考： https: //api.highcharts.com/class-reference/Highcharts.SVGRenderer