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请求的原因，它并没有在第一click.in下一个完整单击它从抓得到的结果和运行速度更快。

试试这个：

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

    }); 
}