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

Question

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

也请看一些短片

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

Answer 1

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

  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