javascript - 打开和关闭数据点后，旧的可拖动元素仍保留在 Highcharts 上

Question

我有 4 个数据系列。三种不可拖动，一种称为新合约。该图表能够打开和关闭任何数据系列。但是，当我更改可拖动数据时，旧数据似乎被保留。这是一个关闭工资上限、税收起征点和工资单的示例。我通过拖动“新契约(Contract)”然后打开和关闭“新契约(Contract)”来创建它

我创建了一个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

我认为您不应该更新有关更改复选框的系列，而应该仅更改它们的可见性。在这种情况下，您可以使用 Series.setVisible() 方法: 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/