ハイチャートの1つの関数だけが機能します

Question

入力ボックスでグラフを操作しようとしています。各入力ボックスはバーに対応する必要があります。私のコードでは、ハイチャートの一番下にある最初の機能を動作させることができますが、バーと同じコードが変更され、入力IDが機能しません。問題の関数は、season-2をidとする最後の関数です。私が何をしたか

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] 
    }, { 
    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' 
    }] 

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

http://jsfiddle.net/twq6gb7d/

Answer 1

私はhighcharts初期化関数内からchange機能を分離し、チャートのコンテナを選択し、highchart関数を呼び出すことによって、jQueryのそれを処理せています。

コードのスニペット：

.... //rest of the code 
    dragMinY: 0, 
    type: 'column', 
    minPointLength: 2, 
    color: '#2c3e50' 
    }] 
}); //end of the highchart initialization 

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

ワーキングJSFiddle here。