Javascript 如何从AJAX调用在highcharts图上画一条线？

我的html页面中有一个highcharts图，我想动态更新它。我有一些输入框，一旦它们被用户更新，就会触发一个AJAX post请求。请求进行了一些计算，我希望输出用于重新绘制图表第二系列的线条。该行表示一个简单的y=x函数，在AJAX调用期间计算“x”变量

以下是我的图表html/JS代码：

<script type="text/javascript">

    $(function () {
    $(document).ready(function () {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        var chart;
        $('#container').highcharts({
            chart: {
                type: 'line',
                animation: Highcharts.svg,
                marginRight: 10,
            },
            title: {
                text: 'Strategy Payoff'
            },
            xAxis: {
                //type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },

            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'PnL',
                data: (function () {
                    var data = [],
                        time = (new Date()).getTime(),
                        i;
                    var V = document.getElementById('V').value;
                    var Q = document.getElementById('Q').value;
                    var S = document.getElementById('S').value;
                    var K = document.getElementById('K').value;
                    var Type = document.getElementById('Type').value;

                    if (Type == 'Call') {
                      direction = 1;
                    } else {
                      direction = -1;
                    }

                    if (S >= 5000) {
                      stepSize = 500;
                    } else if (S >= 500) {
                      stepSize = 50;
                    } else {
                      stepSize = 1;
                    }

                    for (i = 0; i <= S * 2; i+=stepSize) { // i+=stepSize
                        data.push({
                            x: i,
                            y: Math.max(-V * Q, -V * Q + Q * direction * (i-K))
                        });
                    }
                    return data;
                })()
            }, {
                name: 'Current Option Strategy PnL',
                data: (function pnl(value=10) {
                      var data2 = [],
                          time2 = (new Date()).getTime(),
                          i;
                      var S = document.getElementById('S').value;

                      if (S >= 5000) {
                      stepSize = 500;
                      } else if (S >= 500) {
                      stepSize = 50;
                      } else {
                      stepSize = 1;
                      }

                      for (i = 0; i <= S * 2; i+=stepSize) {
                        data2.push({
                            x: i,
                            y: value
                        });
                      }

                    return data2;
                })()
            }]
        });
    });

});

  </script>

$（函数（）{
$（文档）.ready（函数（）{
Highcharts.setOptions({
全球：{
useUTC:false
}
});
var图；
$（“#容器”）。高图({
图表：{
键入：“行”，
动画：Highcharts.svg，
marginRight:10，
},
标题：{
文本：“战略回报”
},
xAxis：{
//键入：“日期时间”，
像素间隔：150
},
亚克斯：{
标题：{
文本：“值”
},
绘图线：[{
值：0，
宽度：1，
颜色：'#808080'
}]
},
图例：{
已启用：false
},
出口：{
已启用：false
},
系列：[{
名称：“PnL”，
数据：（函数（）{
var数据=[]，
时间=（新日期（））.getTime（），
我
var V=document.getElementById（'V'）。值；
var Q=document.getElementById（'Q'）。值；
var S=document.getElementById（'S'）.value；
var K=document.getElementById（'K'）。值；
var Type=document.getElementById（'Type'）。值；
如果（类型==“调用”）{
方向=1；
}否则{
方向=-1；
}
如果（S>=5000）{
步长=500；
}否则，如果（S>=500）{
步长=50；
}否则{
步长=1；
}
对于（i=0；i=5000）{
步长=500；
}否则，如果（S>=500）{
步长=50；
}否则{
步长=1；
}
对于（i=0；i使用success call中的系列。更新功能并在其上设置新数据。请检查下面链接下的可用演示

API:

如果这条线索没有帮助，请在我可以使用的在线编辑器上复制您的代码的简化版本。
谢谢，这正是我需要的！
 <div class="chart" id="container"></div>

 <div class="slider-wrapper">
    <span>Option 1 Imp. Vol.</span>
    <input class="toChange" id="rangeInput" name="rangeInput" type="range" value="{{Sigma}}" min="0.1" max="150" lang="en_EN" step="0.1" oninput="amount.value=rangeInput.value" />
    <input class="toChange" id="amount" type="number" value="{{Sigma}}" min="0.1" max="150" lang="en_EN" step="0.1"oninput="rangeInput.value=amount.value" />
  </div>

 <script type="text/javascript">
   function inputChange () {
        var Sigma = document.getElementById("rangeInput").value;
        var Type = document.getElementById('Type').value;
        var S = document.getElementById('S').value;
        var K = document.getElementById('K').value;
        var t = document.getElementById('t').value;
        var r = document.getElementById('r').value;
        var V = document.getElementById('V').value;
        var Q = document.getElementById('Q').value;
        $.ajax({
                url: '/optionstrategies/',
                type: 'POST',
                data: {
                  'Type': Type,
                  'S': S,
                  'K': K,
                  'r': r,
                  't': t,
                  'Sigma': Sigma,
                },
                success: function(optionVal) {
                alert((optionVal - V) * Q);
                document.getElementById("oPrice").innerHTML = optionVal;
                document.getElementById("PnL").innerHTML = (optionVal - V) * Q;
                // pnl(12);
                }
        }); 
    }

    $(".toChange").change(inputChange); 
 </script>