データポイントをオン/オフした後、古いドラッグ可能な要素はハイチャートに残ります

Question

私は4つのデータ系列を持っています。 3人はドラグできず、もう1人は新しい契約と呼ばれています。グラフには、データ系列のいずれかをオンまたはオフにする機能があります。しかし、私はドラッグ可能なデータを変更すると、それは古いように、データが保持されます。給与上限、税務基準、給与管理をオフにした例を示します。私は "新しい契約"をドラッグして "新しい契約"をオンまたはオフにしてこれを作成しました。

私は作成したjsfiddle http://jsfiddle.net/yc6epqge/を持っています。この問題の修正方法は不思議です。ここに私のコードもあります。

var chart = new Highcharts.Chart({ 

    chart: { 
    renderTo: 'container', 
    animation: false 
    }, 

    xAxis: { 
    categories: ['2016-17', '2017-18', '2018-19', '2019-20', '2020-21', '2021-22'], 
    title: { 
     text: 'Season' 
    } 
    }, 


    yAxis: [{ 
    title: { 
     text: '$ Dollars' 
    } 
    }], 

    plotOptions: { 
    series: { 
     borderColor: '#2c3e50', 
     point: { 
     events: { 
      drag: function(e) { 
      $('#drag').html(
       'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y, 2) + '</b>'); 
       if (this.category == "2016-17"){ 
       $('#season-1').val(Highcharts.numberFormat(e.y, 2)); 
       } 
       if (this.category == "2017-18"){ 
       $('#season-2').val(Highcharts.numberFormat(e.y, 2)); 
       } 
       if (this.category == "2018-19") 
       { 
       $('#season-3').val(Highcharts.numberFormat(e.y, 2)); 
       } 
       if (this.category == "2019-20"){ 
      $('#season-4').val(Highcharts.numberFormat(e.y, 2)); 
      } if (this.category == "2020-21"){ 
       $('#season-5').val(Highcharts.numberFormat(e.y, 2)); 
      } 

      }, 
      drop: function() { 
      $('#drop').html(
       'In <b>' + this.series.name + '</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: { 
    yDecimals: 2 
    }, 

    series: [{ 
    name: 'Salary Cap', 
    data: [94000000, 102000000, 108000000, 109000000, 114000000], 
    visible: true 
    }, { 
    name: 'Tax Cap', 
    data: [113000000, 122000000, 130000000, 132000000, 139000000] 
    }, { 
    name: 'New Contract', 
    data: [10996155, 10996155, 10996155, 10996155, 10996155], 
    draggableY: true, 
    // drag: function() { console.log(arguments); }, 
    dragMinY: 0, 
    type: 'column', 
    minPointLength: 2, 
    color: 'whitesmoke' 
    }, { 
    name: 'Current Payroll', 
    data: [110492645, 103423474, 97903566, 62944822, 28751775], 
    //draggableX: true, 
    draggableY: false, 
    dragMinY: 0, 
    type: 'column', 
    minPointLength: 2, 
    color: '#2c3e50' 
    }] 
}); 

$('#season-1').change(function() { 
    var val = parseInt(this.value) || 0; 
    $('#container').highcharts().series[3].data[0].update({ 
     y: val 
    }); 
    }); 


$('#season-2').change(function() { 
    var val = parseInt(this.value) || 0; 
    $('#container').highcharts().series[3].data[1].update({ 
     y: val 
    }); 
    }); 


$('#season-3').change(function() { 
    var val = parseInt(this.value) || 0; 
    $('#container').highcharts().series[3].data[2].update({ 
     y: val 
    }); 
    }); 

$('#season-4').change(function() { 
    var val = parseInt(this.value) || 0; 
    $('#container').highcharts().series[3].data[3].update({ 
     y: val 
    }); 
    }); 
$('#season-5').change(function() { 
    var val = parseInt(this.value) || 0; 
    $('#container').highcharts().series[3].data[4].update({ 
     y: val 
    }); 
    }); 
$('#salarycap').change(function() { 
    var val = $(this).is(':checked'); 
    $('#container').highcharts().series[0].update({ 
     visible: val 
    }); 
}); 
$('#taxthreshold').change(function() { 
    var val = $(this).is(':checked'); 
    $('#container').highcharts().series[1].update({ 
     visible: val 
    }); 
}); 
$('#newcontract').change(function() { 
    var val = $(this).is(':checked'); 
    $('#container').highcharts().series[2].update({ 
     visible: val 
    }); 
}); 
$('#currentpayroll').change(function() { 
    var val = $(this).is(':checked'); 
    $('#container').highcharts().series[3].update({ 
     visible: val 
    }); 
}); 

Answer 1

チェックボックスの変更時にシリーズを更新する代わりに、表示のみを変更する必要があります。あなたはそれが動作する方法の例を見ることができる。ここ http://api.highcharts.com/highcharts/Series.setVisible

$('#newcontract').change(function() { 
    var val = $(this).is(':checked'); 
    $('#container').highcharts().series[2].setVisible(val); 
}); 

： http://jsfiddle.net/yc6epqge/3/

この場合、あなたはSeries.setVisible（）メソッドを使用することができます