Javascript 在谷歌图表中点击按钮调用drawchart会引起一些混乱

我试图在单击按钮时生成柱状图。当我单击按钮时，会调用drawchart（），但屏幕上没有创建图表。我使用警报检查了该函数，发现data.addRow（array1[I]，array2[j]）不执行。这两个数组都包含从json提取的值

另外，当我删除此按钮并在页面加载时调用函数drawChart（）时，我可以看到只创建了图表，但没有向其绘制列，因为两个数组中都没有值。非常感谢您提供的任何帮助

我的代码

<script type="application/javascript">
  function loadJSON()
  {

      alert("hello");
      alert(category);
      alert(subcat);
      alert(subdem);
     var data_file = "https://tc.api.tibco.com:43/TopOne/v1/"+category+"/"+subcat+"/"+subdem;
     alert("abc")
     var http_request = new XMLHttpRequest();
     try{
        // Opera 8.0+, Firefox, Chrome, Safari
        alert("in try");
        http_request = new XMLHttpRequest();
     }catch (e){
        // Internet Explorer Browsers
        try{ alert("in try1");
           http_request = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {
           try{ alert("in try2");
              http_request = new ActiveXObject("Microsoft.XMLHTTP");
           }catch (e){
              // Something went wrong
              alert("Your browser broke!");
              return false;
           }
        }
     }
     http_request.onreadystatechange  = function(){
         if(http_request.readyState ==1){ alert("1");}
         if(http_request.readyState ==2){ alert("2");}
         if(http_request.readyState ==3){ alert("3");}
         if(http_request.readyState ==4){ alert("4");}
        if (http_request.readyState == 4  )
        {
          // Javascript function JSON.parse to parse JSON data
          var jsonObj = JSON.parse(http_request.responseText);
            alert(http_request.responseText);
            alert(jsonObj);
          // jsonObj variable now contains the data structure and can
          // be accessed as jsonObj.name and jsonObj.country.

         //alert( jsonObj.Category.CategoryName);
         //alert(jsonObj.Category.CategoryName.Demographies.DemographyName);

          //document.getElementById("Country").innerHTML = jsonObj.country;
          alert(jsonObj.Category[0].SubCategory[0].Demographies[0].Items[0].Name);
          alert(jsonObj.Category[0].SubCategory[0].Demographies[0].Items[1].Name);
          for(i = 0;i<10;i++)
              {
              array1[i] = jsonObj.Category[0].SubCategory[0].Demographies[0].Items[i].Name;
              array2[i] = jsonObj.Category[0].SubCategory[0].Demographies[0].Items[i].SalesCount;

              }
          for(i=0;i<10;i++)
              {
              alert(array1[i]+" "+array2[i]);
              }
        }
     }
     http_request.open("GET", data_file, true);
    http_request.setRequestHeader("accept","application/json");

     http_request.send();
     }




  function drawChart(){

    alert("hello");

     var data = new google.visualization.DataTable();
     data.addColumn('string', 'name');
     data.addColumn('number', 'salescount');
     alert("ggg");
     for(i = 0; i < array1.length; i++)
            data.addRow([array1[i], array2[i]]);






        var options = {
          title: "Movies",
          width: 600,height:400
          //hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}

        };

        var chart = new google.visualization.ColumnChart(document.getElementById('lowerRightDiv'));
        chart.draw(data, options);
  } 
  function initialize(){

            $("button.charts").click(function() {

                    drawChart();
            });
        }
       google.setOnLoadCallback(initialize);
       google.load("visualization", "1", {packages:["corechart"]});

      </script>

函数loadJSON（）
{
警惕（“你好”）；
警报（类别）；
警报（subcat）；
警报（子DEM）；
变量数据_文件=”https://tc.api.tibco.com:43/TopOne/v1/“+类别+”/“+子类别+”/“+子单元；
警报（“abc”）
var http_request=new XMLHttpRequest（）；
试一试{
//Opera 8.0+、Firefox、Chrome、Safari
警惕（“尝试中”）；
http_请求=新的XMLHttpRequest（）；
}捕获（e）{
//Internet Explorer浏览器
try{alert（“in try1”）；
http_请求=新的ActiveXObject（“Msxml2.XMLHTTP”）；
}捕获（e）{
try{alert（“in try2”）；
http_请求=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}捕获（e）{
//出了点问题
警告（“你的浏览器坏了！”）；
返回false；
}
}
}
http_request.onreadystatechange=函数（）{
如果（http_request.readyState==1）{alert（“1”）；}
如果（http_request.readyState==2）{alert（“2”）；}
如果（http_request.readyState==3）{alert（“3”）；}
如果（http_request.readyState==4）{alert（“4”）；}
如果（http_request.readyState==4）
{
//Javascript函数JSON.parse解析JSON数据
var jsonObj=JSON.parse（http_request.responseText）；
警报（http_request.responseText）；
警报（jsonObj）；
//jsonObj变量现在包含数据结构并可以
//可作为jsonObj.name和jsonObj.country访问。
//警报（jsonObj.Category.CategoryName）；
//警报（jsonObj.Category.CategoryName.Demographies.DemographyName）；
//document.getElementById（“Country”）.innerHTML=jsonObj.Country；
警报（jsonObj.Category[0]。子类别[0]。人口统计[0]。项目[0]。名称）；
警报（jsonObj.Category[0]。子类别[0]。人口统计[0]。项目[1]。名称）；
对于（i=0；i为什么使用jquery有“onclick”属性和
click
绑定？我想你通常只需要其中一个…还有，你有没有调用函数来实际加载JSON？它没有显示在任何地方，所以你可能试图用不存在的数据制作图表。很抱歉，我保留了调用JSON的按钮s loadJSON（）函数loadJSON这个我保留了一个按钮jus用于测试。但是在调用JSON之后，它不会执行这样的命令，这是一个可变范围的问题。在
绘图图的开头添加行
console.log（array1，array2）；
，然后在Chrome中打开页面并查看开发人员的控制台（ctrl+shift+j在Windows中打开）。运行
drawChart
时控制台中的输出是什么？
<button class="charts" onclick="initialize();"style="left:400px;">Generate charts</button>