Обновление Y-оси линейного графика Highcharts вызывает вертикальную линию

Question

Я реализую график линий Highcharts, где мне нужно уметь перетаскивать точки, а также обновлять ось y моей диаграммы. Когда я перетаскиваю точку, а затем обновляю ось y, линия выводится из исходной точки туда, куда я перетаскивался: Here is a picture of what is happening.

Я бы предпочел не иметь всех этих вертикальных линий, по какой-то причине это кажется дублировать точки, потому что я также получаю некоторые треугольники при тестировании. Остается ли он просто покинуть линию, но на самом деле не обновить точку? Чтобы обновить график, который я просто делаю:

planChart.yAxis[0].max = newValueY; 
$('.actualPlansPlot').highcharts(planChart); 

Любое руководство было бы высоко оценено!

Вот остальная часть коды:

var values = [...my values]; 
planChart = { 
    chart: { 
     renderTo: 'container', 
     animation: false 
    }, 
    title: { 
     text: '' 
    }, 
    xAxis: { 
     categories: startDates, 
     crosshair: true, 
    }, 
    yAxis: [{ // Primary yAxis 
     labels: { 
      format: '{value}', 
      style: { 
       color: '#20709e' 
      } 
     }, 
     title: { 
      text: 'title', 
      style: { 
       color: '#20709e' 
      } 
     }, 
    }], 

    plotOptions: { 
     series: { 
      point: { 
       events: { 

        drag: function (e) { 
         // Returning false stops the drag and drops. Example: 
         /* 
         if (e.newY > 300) { 
          this.y = 300; 
          return false; 
         } 
         */ 

         $('#drag').html(
          'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y, 2) + '</b>'); 
        }, 
        drop: function() { 
         $('#drop').html(
          'In <b>' + this.series.options.id + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>'); 
        } 
       } 
      }, 
      stickyTracking: false 
     }, 
     column: { 
      stacking: 'normal' 
     }, 
     line: { 
      cursor: 'ns-resize' 
     } 
    }, 

    tooltip: { 
     shared: true 
    }, 

    credits: { 
     enabled: false 
    }, 

    series: [{ 
     name: 'title', 
     tooltip: { 
      pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.y} ' + trainingPlan.unit + '</b><br/>' 
     }, 
     data: values, 
     //draggableX: true, 
     draggableY: true, 
     dragMinY: 0, 
     style: { 
      color: '#20709e' 
     } 
    }] 
} 
$('.actualPlansPlot').highcharts(planChart); 

Это довольно близко к примеру перемещаемых точек онлайн

Answer 1

Обновлено

использовать следующий код:

$(document).on('click', '#updateYScale', function(e) { 
var yValue = $('#newYValue')[0].value;  
     var chart = $('.actualPlansPlot').highcharts(); 
     chart.yAxis[0].update({    
     max: yValue    
    }); 

    chart.redraw(); 
    }); 

См. Демонстрацию fiddle with your issue's fix