我试图点击按钮生成柱形图。当我点击按钮时,会调用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>
我创建按钮的代码是
<button class="charts" onclick="initialize();"style="left:400px;">Generate charts</button>