Question

我正在使用谷歌图表构建仪表板。有许多切换按钮可刷新图表。我已经完成了这个，但有一个问题。刷新图表的代码需要运行3次才能正确刷新。如果我不运行代码3次，它将根据先前数据查询的数据刷新图表。例如，如果我有区域按钮＆＃34; US＆＃34;和＃34;加拿大＆＃34;选中，然后点击＆＃34;亚洲＆＃34;该图表仅显示＆＃34; US＆＃34;和＃34;加拿大＆＃34;。一旦我取消选择＆＃34; Asia＆＃34;，它将显示所有三个。然后循环继续，好像图表拖尾数据一拖。我只用一张图表缩短了下面的代码。有循环运行代码3次，使代码正确更新图表。知道如何在不运行代码的情况下让代码正常工作3次吗？

<html>
<!--Load Style docs-->
<link rel="stylesheet" type="text/css" href="ToggleButton-Styles.css">
<link rel="stylesheet" type="text/css" href="Dashboard-Styles.css">
<body>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(buildCharts);

function buildCharts() {
var jsonChartA = $.ajax({
      url: "Charts/getChartA.php",
      dataType: "json",
      async: false
      }).responseText;

 var optionsA = {
      legend: {'position':'top','alignment':'center',maxLines:2},
      title:'Franchise Totals by Year',
      width: 1525, height: 325,
      vAxis: {minValue: 0},
      'chartArea': {'width': '85%', 'height': '70%'},
      };
var dataA = new google.visualization.DataTable(jsonChartA);
var chartA = new google.visualization.ColumnChart(document.getElementById('chart_divP'));
chartA.draw(dataA,optionsA);
}

function updateJson(){

/ 从按钮获取查询变量的代码...... / / 将变量发送到php代码 /

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "Database.php?Locations=" + Selected_locations + 
           "&months=" + Months + "&years=" + Years + 
           "&status=" + Status + "&global=" + Global + 
           "&region=" + Regions, true );
xhttp.send();

这是我必须运行三次的代码......

    for(var x =0; x < 3; x++){                  
    var jsonChartA = $.ajax({
    url: "Charts/getChartA.php",
    dataType: "json",
    async: false
    }).responseText;

    var optionsA = {
    legend: {'position':'top','alignment':'center', maxLines:2},
    title:'Monthly Totals by Year',
    width: 1525, height: 325,
    vAxis: {minValue: 0},
    'chartArea': {'width': '85%', 'height': '70%'},
    };
    var dataA = new google.visualization.DataTable(jsonChartA);
    var chartA = new google.visualization.ColumnChart(document.getElementById('chart_divP'));
    chartA.draw(dataA,optionsA);
    }   
}
    </script>

</head>     
<div class="element6"><div id="chart_divP"></div></div>
</body>     
</html>

除非我三次运行刷新代码，否则刷新Google图表不会刷新

0 个答案: