Question

我想建立一个像这样的图表 enter image description here

在左侧图表上拖动红色点或两条蓝线，然后图表将在右侧生成第二条。请告诉我如何使用highcharts或其他图表库。非常感谢你！

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

在高图上查找特殊图表

1 个答案: