Jquery 在窗口调整事件中使用AJAX数据调整Google图表的大小？
我尝试了以下代码，当窗口调整大小时，这些代码会重新调整Google图表的大小Jquery 在窗口调整事件中使用AJAX数据调整Google图表的大小？,jquery,google-visualization,Jquery,Google Visualization,我尝试了以下代码，当窗口调整大小时，这些代码会重新调整Google图表的大小 ... <div id="demo-chart"></div>... 我的Javascript代码将是 <script src="http://www.google.com/jsapi"></script> <script> function loadData(fileName) { // $.getJSON( fileName
... <div id="demo-chart"></div>...
<script src="http://www.google.com/jsapi"></script>
<script>
function loadData(fileName) {
// $.getJSON( fileName)
return $.ajax({
url: fileName,
dataType: "json",
async: false,
}).responseText;
}
drawVisitorsChart = function()
{
var myFile = "test.json";
var jsonData= loadData(myFile);
var obj = jQuery.parseJSON(jsonData);
var data = new google.visualization.arrayToDataTable(obj);
var div = $('#demo-chart'),
divWidth = div.width();
new google.visualization.LineChart(div.get(0)).draw(data, {
title: 'Monthly unique visitors count',
width: divWidth,
height:180,
legend: 'right',
yAxis: {title: '(thousands)'},
backgroundColor: '#494C50',
legendTextStyle: { color: 'white' },
titleTextStyle: { color: 'white' },
hAxis: {
textStyle: { color: 'white' }
},
vAxis: {
textStyle: { color: 'white' },
baselineColor: '#666666'
},
chartArea: {
top: 35,
left: 30,
width: divWidth-40
},
legend: 'bottom'
});
};
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {
'packages': ['corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawVisitorsChart);
// Watch for block resizing
window.onresize = drawVisitorsChart;
</script>
函数加载数据（文件名）{
//$.getJSON（文件名）
返回$.ajax({
url:fileName，
数据类型：“json”，
async:false，
}).responseText；
}
drawVisitorsChart=函数（）
{
var myFile=“test.json”；
var jsonData=loadData（myFile）；
var obj=jQuery.parseJSON（jsonData）；
var data=新的google.visualization.arrayToDataTable（obj）；
var div=$（“#演示图”），
divWidth=div.width（）；
新google.visualization.LineChart（div.get（0））.draw（数据、{
标题：“每月唯一访客计数”，
宽度：divWidth，
身高：180，
图例：“对”，
yAxis:{title:'（千）}，
背景颜色：“#494C50”，
legendTextStyle:{color:'white'}，
titleTextStyle:{color:'white'}，
哈克斯：{
textStyle:{color:'white'}
},
言辞：{
textStyle:{color:'white'}，
基线颜色：“#666666”
},
图表区：{
排名：35，
左:30,，
宽度：divWidth-40
},
图例：“底部”
});
};
//加载可视化API和piechart包。
load（'visualization'，'1'，'{
“包”：[“核心图表”]
});
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawVisitorsChart）；
//注意块大小调整
window.onresize=drawVisitorsChart；
在调整窗口大小时，有没有更好的方法可以使用AJAX数据调整Google图表的大小？我尝试了以下代码，它可以正常工作
<script> (function($,sr){
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
}; } // smartresize $.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })($,'smartresize'); </script> <script> google.load('visualization', '1', { 'packages': ['corechart'] }); var options, data, chart; function loadData() { // $.getJSON( fileName) var myFile = "test.json"; return $.ajax({
url: myFile,
dataType: "json",
async: false,
}).responseText; } // Load the Visualization API and the piechart package.
var chartInit = false;
$(function(){ google.setOnLoadCallback(drawVisitorsChart);
function drawVisitorsChart()
{
var jsonData= loadData();
// $('#json-data').attr('data-dataset',jsonData);
var obj = jQuery.parseJSON(jsonData);
data = new google.visualization.arrayToDataTable(obj);
var div = $('#demo-chart'),
divWidth = div.width();
options = {
title: 'Monthly unique visitors count',
width: '100%',
height:180,
legend: 'right',
yAxis: {title: '(thousands)'},
backgroundColor: '#494C50',
legendTextStyle: { color: 'white' },
titleTextStyle: { color: 'white' },
hAxis: {
textStyle: { color: 'white' }
},
vAxis: {
textStyle: { color: 'white' },
baselineColor: '#666666'
},
chartArea: {
top: 35,
left: 30,
width: divWidth-40
},
legend: 'bottom'
};
chart = new google.visualization.LineChart(document.getElementById('demo-chart'));
chart.draw(data, options);
} // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawVisitorsChart);
});
// Watch for block resizing
$(window).smartresize(function () {
chart.draw(data, options);
});
</script>
（函数（$，sr）{
var debounce=函数（函数、阈值、execAsap）{
var超时；
返回函数去抖动（）{
var obj=this，args=arguments；
函数延迟（）{
如果（！execAsap）
应用函数（对象，参数）；
超时=空；
};
如果（超时）
clearTimeout（超时）；
否则如果（请尽快执行）
应用函数（对象，参数）；
超时=设置超时（延迟，阈值| | 100）；
}；}//smartresize$.fn[sr]=函数（fn）{return fn？this.bind（'resize'，debounce（fn））：this.trigger（sr）；}；}（$，'smartresize'）；load（'visualization'，'1'，{'packages'：['corechart']}）；var期权、数据、图表；函数loadData（）{//$.getJSON（文件名）var myFile=“test.json”；返回$.ajax({
url:myFile，
数据类型：“json”，
async:false，
}).responseText；}//加载可视化API和piechart包。
var chartInit=false；
$（function（）{google.setOnLoadCallback（drawVisitorsChart）；
函数drawVisitorsChart（）
{
var jsonData=loadData（）；
//$（'json data'）.attr（'data-dataset'，jsonData）；
var obj=jQuery.parseJSON（jsonData）；
数据=新的google.visualization.arrayToDataTable（obj）；
var div=$（“#演示图”），
divWidth=div.width（）；
选项={
标题：“每月唯一访客计数”，
宽度：“100%”，
身高：180，
图例：“对”，
yAxis:{title:'（千）}，
背景颜色：“#494C50”，
legendTextStyle:{color:'white'}，
titleTextStyle:{color:'white'}，
哈克斯：{
textStyle:{color:'white'}
},
言辞：{
textStyle:{color:'white'}，
基线颜色：“#666666”
},
图表区：{
排名：35，
左:30,，
宽度：divWidth-40
},
图例：“底部”
};
chart=新的google.visualization.LineChart（document.getElementById（'demo-chart'）；
图表绘制（数据、选项）；
}//设置在加载Google可视化API时运行的回调。Google.setOnLoadCallback（drawVisitorsChart）；
});
//注意块大小调整
$（窗口）.smartresize（函数（）{
图表绘制（数据、选项）；
});
<script> (function($,sr){
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
}; } // smartresize $.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })($,'smartresize'); </script> <script> google.load('visualization', '1', { 'packages': ['corechart'] }); var options, data, chart; function loadData() { // $.getJSON( fileName) var myFile = "test.json"; return $.ajax({
url: myFile,
dataType: "json",
async: false,
}).responseText; } // Load the Visualization API and the piechart package.
var chartInit = false;
$(function(){ google.setOnLoadCallback(drawVisitorsChart);
function drawVisitorsChart()
{
var jsonData= loadData();
// $('#json-data').attr('data-dataset',jsonData);
var obj = jQuery.parseJSON(jsonData);
data = new google.visualization.arrayToDataTable(obj);
var div = $('#demo-chart'),
divWidth = div.width();
options = {
title: 'Monthly unique visitors count',
width: '100%',
height:180,
legend: 'right',
yAxis: {title: '(thousands)'},
backgroundColor: '#494C50',
legendTextStyle: { color: 'white' },
titleTextStyle: { color: 'white' },
hAxis: {
textStyle: { color: 'white' }
},
vAxis: {
textStyle: { color: 'white' },
baselineColor: '#666666'
},
chartArea: {
top: 35,
left: 30,
width: divWidth-40
},
legend: 'bottom'
};
chart = new google.visualization.LineChart(document.getElementById('demo-chart'));
chart.draw(data, options);
} // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawVisitorsChart);
});
// Watch for block resizing
$(window).smartresize(function () {
chart.draw(data, options);
});
</script>