Question

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

另请参见一些短视频

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

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

1 个答案: