一次拖动两点

Question

我希望用户能够通过单击图形创建一条小线段，然后能够同时拖动这两个点。此外，我非常明确地不希望用户能够相互独立地拖动这两个点。本质上，我正在尝试创建一个用户正在拖动一个小的水平线段的设置。

到目前为止，我已经做到了用户单击即可创建线段。但是，我似乎无法将这两点拖在一起而不是独立。

作为奖励问题 - 有谁知道如何独立控制面积图中的不透明度？我想降低我提供的示例中红色的不透明度。

工作 JSfiddle：https://jsfiddle.net/9g4r3su6/1/

要使用 fiddle，请单击阴影区域以创建线段。您可以通过单击阴影区域来四处移动线段。但是，您会看到这些点独立拖动。我希望点可以一起拖，不能单独拖

代码：


var myChart;

Highcharts.setOptions({
    plotOptions: {
        series: {
            animation: false,
            fillOpacity: 0
        },
        
        dragDrop: {
        draggableX: true,
        liveRedraw: false,
        groupBy: 'GroupId'
      },
    }
});

// draw chart
  myChart = Highcharts.chart('container', 
  {
    chart: {
      type: "area",
      
           events: {
            click: function (e) {
                // find the clicked values and the series
               var y = e.yAxis[0].value,
                   x=11.5,
                   z=12.5,
                   series = this.series[3].data[11];
                   series.update({x, y, color: 'red'});
                   series1 = this.series[3].data[12];
                   series1.update({z, y, color: 'red'});
            },
        }
    },
    title: {
      text: "Series History"
    },

    xAxis: {
      type: 'category',
      allowDecimals: true,
      title: {
        text: "Quarter"
      }, 

    plotBands: [{
    color: 'rgba(204,153,255,0.2)', // Color value
    from: 11.5, // Start of the plot band
    to: 12.5, // End of the plot band
    label: {
                    text: 'Forecxast'
                }
    }]
    },
    yAxis: {
      title: {
        text: "Number (%)"
      },
      plotLines: [{
        value: 0,
        width: 2,
        color: '#aaa',
        zIndex: 10
      }]
    },
    tooltip: {
         style: {
            color: 'black',
            fontWeight: 'bold',
            fontSize: 15
        },
     positioner: function () {
            return { x: 80, y:0 };
        },
    shared: true,
    headerFormat: '',
    pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
    valueDecimals: 2,
    shadow: false,
    borderWidth: 2,
    borderColor: '#000000',
    shape: 'rect',
    backgroundColor: 'rgba(255,255,255,0.8)'
  },
 
    series: [
        
            {
              name: 'Series1',
              data: [3.9,4.98,5.72,5.73,3.61,3.68,3.72,2.64,2.1,1.94,1.99,1.87,null]
            },
             {
               name: 'Series2',
               data: [2,3.47,4.2,4.62,4.51,3.079,3.13,3.15,2.43,2.17,1.7,2.17,1]
             },
            {
                    name: 'Your Original Guess',
               showInLegend: false,
               data: [null,null,null,null,null,null,null,null,null,null,null,null,2],
               marker: {
               radius: 2.5,
               fillColor: 'red'
              
              },
             },
             {
                 
                  dragDrop: {
                    draggableY: true,
                    groupBy: 'GroupId',
                    dragMinY: -10,
                    dragMaxY: 10,
                    dragPrecisionY: .01, 
                    liveRedraw: false,
                    
                 },
                point: {
                
                    
                    events: {
                        
                        drag: function() {
                            if (this.color !== 'red') {
                                return false;
                            }
                        },
                        drop: function() {
                            if (this.color !== 'red') {
                                return false;
                            }
                        }, 
                        
                    }
                },
        
               name: 'Guess Uncertainty, Upper Bound',
               groupId: 'event',
               showInLegend: false,
               data: [null, null,null, null,null, null,null, null,null, null,null, [11.5,null],[12.5,null]],
               color: 'red',
               marker: {
               radius: 2.25,
               fillColor: 'red',
               symbol: 'square'
             
              },
             },
            ], 
    });

Answer 1

我认为使用列系列会更好地满足您的要求 - 您不需要同时拖动两个点。

设置适当列宽的逻辑：

  load() {
            const chart = this;
            const tickAmount = chart.xAxis[0].tickPositions.length;
            const columnSeries = this.series.find(s => s.userOptions.id === 'column');
            
            if (columnSeries) {
                columnSeries.update({
                    pointWidth: chart.plotWidth / tickAmount
                })
            }
  }

演示：https://jsfiddle.net/BlackLabel/06x5owds/

一次拖动两点

Drag Two points at same time with single action

javascript

highcharts