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

用于 updateTime3Period 的 JS/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);
}

上面调用的函数(同一个文件):

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 请求的原因，它在第一次点击时没有完成。在下一次点击中它从 catch 中获取结果并运行得更快。

试试这个:

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);  
                           }
                    });
        }

    });
}