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

Question

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

请看一些短视频

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

Answer 1

您可以简单地使用 Highcharts.SVGRenderer class 呈现 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
    }

  }

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

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

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

How do I create a draggable plot line in Highcharts?

highcharts

jstockchart