Saya memiliki di halaman html saya grafik grafik tinggi yang ingin saya perbarui secara dinamis. Saya memiliki beberapa kotak input yang setelah diperbarui oleh pengguna, memicu permintaan posting AJAX. Permintaan melakukan beberapa perhitungan dan saya ingin hasilnya digunakan untuk menggambar ulang garis seri kedua bagan saya. Baris itu mewakili fungsi y = x sederhana, variabel 'x' dihitung selama panggilan AJAX.

Ini kode html/JS saya untuk bagan:

<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>

Berikut adalah kotak input yang memicu permintaan AJAX saat diperbarui oleh pengguna:

 <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>

Akhirnya, inilah permintaan AJAX itu sendiri:

 <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>

Panggilan AJAX berfungsi dengan baik karena peringatan menunjukkan nilai yang diharapkan. Saya sekarang perlu menggunakan nilai itu untuk memperbarui bagan saya. Jadi misalnya, jika nilainya sama dengan 12, saya memerlukan rangkaian kedua dari bagan saya untuk menggambar garis yang mewakili fungsi y = 12. Saya telah menamai fungsi yang berhubungan dengan seri kedua saya 'pnl' seperti yang Anda lihat. Saya telah mencoba memanggil fungsi itu di bagian 'sukses' dari permintaan AJAX saya dengan menulis sesuatu seperti 'pnl(12);', tetapi tidak melakukan apa-apa. Adakah yang bisa membantu?

1
curiousIT 17 April 2020, 16:39

1 menjawab

Jawaban Terbaik

Gunakan fitur series.update di dalam panggilan sukses dan atur data baru di dalamnya. Silakan periksa demo yang tersedia di bawah tautan di bawah ini.

API: https://api.highcharts.com/class-reference/Highcharts. Seri#pembaruan

Jika petunjuk ini tidak membantu, harap buat ulang versi kode Anda yang disederhanakan pada beberapa editor online yang dapat saya kerjakan.

1
Sebastian Wędzel 17 April 2020, 14:03