Найти специальный график на высоких картах

Question

Я хотел бы построить такую ​​диаграмму, как эта введите описание изображения здесь

Перетащите красную точку или две синие линии на левую диаграмму, затем диаграмма сгенерирует вторую направо.Пожалуйста, посоветуйте мне, как поступить с высокими графиками или другой библиотекой графиков.Большое спасибо!

Answer 1

В Highcharts такой функции нет, и ее реализация будет не такой простой, но я не говорю, что это невозможно.Чтобы добиться подобного эффекта, вы можете использовать функцию renderer, создать круг и линии.Затем измените их атрибуты (положение и размеры) при перетаскивании круга.Например:

  chart: {
    events: {
      load() {
        var chart = this,
          circleWidth = 5,
          circleInitPos = {
            x: 100,
            y: 100
          },
          lineWidth = 2,
          indicator = chart.renderer.g('indicator').attr('zIndex', 5).add(),
          leftLine = chart.renderer.rect(0, circleInitPos.y, circleInitPos.x, lineWidth)
          .attr({
            fill: 'blue'
          })
          .add(indicator),
          bottomLine = chart.renderer.rect(circleInitPos.x, circleInitPos.y, lineWidth, chart.containerHeight - circleInitPos.y)
          .attr({
            fill: 'blue'
          })
          .add(indicator),
          circle = chart.renderer.circle(100, 100, circleWidth)
          .attr({
            fill: 'red'
          }).add(indicator);

        circle.drag = false;

        chart.container.onmousemove = function(e) {
          if (circle.drag) {
            let normalizedEvent = chart.pointer.normalize(e),
              groupPos = indicator.getBBox(),
              leftLineLen = chart.plotWidth - e.chartX,
              bottomLineLen = chart.plotHeight - e.chartY;

            // Recalculate dimensions
            leftLine.attr({
              width: e.chartX,
              y: e.chartY
            })
            bottomLine.attr({
              height: chart.containerHeight - e.chartY,
              y: e.chartY,
              x: e.chartX
            })
            circle.attr({
              x: e.chartX,
              y: e.chartY
            })
          }
        }

        circle.element.onmousedown = function() {
          circle.drag = true
        }

        circle.element.onmouseup = function() {
          circle.drag = false
        }

      }
    }
  },

Я подготовил пример, который показывает, как это сделать, поэтому вот он: https://jsfiddle.net/rgs4v5az/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer