OnClick принимает два щелчка, чтобы заполнить результаты, HighCharts

Question

Моя проблема связана с необходимостью дважды нажать кнопку, чтобы заполнить желаемые результаты. Я использую HighCharts для построения графика, но функцию updateTime3Period() необходимо вызвать дважды, прежде чем график будет отображаться правильно. Ниже я включил весь свой код, кроме функции updateTime6Period(), так как он в большинстве случаев совпадает с updateTime3Period(). У них обоих одна и та же проблема. Я хотел бы, чтобы кнопка была нажата один раз, а затем заполнить желаемый график. Я прошу прощения за длинный пост. Заранее спасибо! Примечание. Это работает, если дважды щелкнуть updateTime3Period().

HTML

<div id="timelinePeriods">
    <ul class="timeSelection">
        <li><a href="#" onclick="updateTime6Period();" > Past 6 Periods</a></li>
        <li><a href="#" onclick="updateTime3Period();"> Past 3 Periods</a></li>
    </ul>
</div>

JS / AJAX для updateTime3Period :

function updateTime3Period() {
    timeFrameUpdate = 'Past 3 Periods';
    displayParam();

    $.ajax({
        url: 'PHP/getValues.php',
        type: 'post',
        data: {
            type: "A",
            type2: B,
            type3: C,
            type4: D,
            type5: E,
            type6: F,
            type7: "getChartCurr"
        },

        success: function(response2) {
            obj2 = JSON.parse(response2);

        }

    });

    $.ajax({
        url: 'PHP/getValues.php',
        type: 'post',
        data: {
            type: "A",
            type2: B,
            type3: C,
            type4: D,
            type5: E,
            type6: F,
            type7: "getChartPrev"
        },

        success: function(response3) {
            obj3 = JSON.parse(response3);

        }

    });

    updateCharts(obj2, obj3, measureUpdate);
}

Функции, которые вызываются выше (тот же файл) :

function displayParam() {
    document.getElementById("params").innerHTML = timeFrameUpdate;
}

function updateCharts(data1, data2, measureData) {

} else if (timeFrameUpdate == 'Past 6 Periods') {
    updateSixMonthPeriodChart(data1, data2, measureData);
} else if (timeFrameUpdate == 'Past 3 Periods') {
    updateThreeMonthPeriodChart(data1, data2, measureData);
}

График HighCharts :

function updateThreeMonthPeriodChart(data1, data2, measureData) {

    var measureValue = data1["graph"];
    var measureValuePrev = data2["graphPrev"];
    var changeValue = new Array();

    for (i = 0; i < 3; i++) {
        measureValue[i] = parseInt(measureValue[i]);
        changeValue[i] = (parseInt(measureValue[i]) - parseInt(measureValuePrev[i])) / parseInt(measureValuePrev[i])
    }
    var chart1; // globally available
    $(document).ready(function() {
        chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'myChart',
            },
            title: {
                text: 'Sales and Percent Change vs. Last Year - Past 3 Periods'
            },
            xAxis: {
                categories: [1, 2, 3],
                title: {
                    text: 'Period'
                },
            },
            yAxis: [{
                labels: { //Right y-axis
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 1, '.', ',') + '%';
                    }
                },
                title: {
                    text: '% Change'
                },
                opposite: true
            },
            { //Left y-axis
                labels: {
                    formatter: function() {
                        return '$' + Highcharts.numberFormat(this.value, 0, '', ',');
                    }
                },
                title: {
                    text: 'Sales ($)'
                }
            },
            ],
            series: [{
                name: 'Sales',
                data: [measureValue[0], measureValue[1], measureValue[2]],
                color: '#363534',
                //Charcoal
                yAxis: 1,
                type: 'column'
            },
            {
                name: '% Change',
                data: [changeValue[0], changeValue[1], changeValue[2]],
                color: '#E17000',
                //Pumpkin
                //yAxis: 2,
                type: 'spline'
            }]
        });
    });
}

Answer 1

Это может быть причиной вашего ajax-запроса, он не был выполнен при первом щелчке. При следующем щелчке он получает результат от улова и работает быстрее.

попробуйте это:

function updateTime3Period() {
    timeFrameUpdate = 'Past 3 Periods';
    displayParam();

        $.ajax({
        url : 'PHP/getValues.php',
        type : 'post',
        data : {
            type : "A",
            type2 : B,
            type3 : C,
            type4 : D,
            type5 : E,
            type6 : F,
            type7 : "getChartCurr"
        },

        success : function (response2) {
            obj2 = JSON.parse(response2);
                     $.ajax({
                           url : 'PHP/getValues.php',
                           type : 'post',
                           data : {
                        type : "A",
                        type2 : B,
                        type3 : C,
                        type4 : D,
                        type5 : E,
                        type6 : F,
                        type7 : "getChartPrev"
                        },
                           success : function (response3) {
                        obj3 = JSON.parse(response3);
                        updateCharts(obj2,obj3,measureUpdate);  
                           }
                    });
        }

    });
}