Как мне создать перетаскиваемую сюжетную линию в Highcharts? - PullRequest
Новая
       17

Как мне создать перетаскиваемую сюжетную линию в Highcharts?

0 голосов
/ 16 октября 2018

Как мне создать перетаскиваемый сюжет в Highcharts?Я не мог найти информацию об этом.Смотрите пожалуйста скриншот.Вы увидите зеленую линию на скриншоте.Эта сюжетная линия должна быть ориентирована по оси x и перетаскиваться с максимальными и минимальными значениями на оси Х.Вы можете мне помочь?может быть какое-то предложение или ссылка на официальные документы.Заранее благодарю. скриншот

см. Также короткое видео

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

1 Ответ

0 голосов
/ 16 октября 2018

Вы можете просто визуализировать элемент 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

...