Javascript 谷歌图表根据屏幕大小更改大小
我有一个问题，我正在开发一个网络应用程序，我有一些谷歌图表。虽然我想知道的是，在有人将手机或平板电脑从纵向切换到横向后，是否有任何方法可以改变图表的大小，但我已经成功地使图表的大小根据屏幕大小而变化。现在，一旦图表出现，你切换手机方向，图表的大小保持不变，所以它只会在你第一次看到图表时检测手机屏幕的大小 下面是一些代码（如果有人有更好的方法，请让我知道…）Javascript 谷歌图表根据屏幕大小更改大小,javascript,jquery,mobile,charts,Javascript,Jquery,Mobile,Charts,我有一个问题，我正在开发一个网络应用程序，我有一些谷歌图表。虽然我想知道的是，在有人将手机或平板电脑从纵向切换到横向后，是否有任何方法可以改变图表的大小，但我已经成功地使图表的大小根据屏幕大小而变化。现在，一旦图表出现，你切换手机方向，图表的大小保持不变，所以它只会在你第一次看到图表时检测手机屏幕的大小 下面是一些代码（如果有人有更好的方法，请让我知道…） 函数图（depData、indepData、seriesTitle、title、xTitle、yTitle、chartTitle、bg）{
函数图（depData、indepData、seriesTitle、title、xTitle、yTitle、chartTitle、bg）{
var-rlen=5；
变量图_字符串=”http://chart.apis.google.com/chart?cht=lxy";
图_字符串+=”&chd=t:”；
var最大、最大指数、最大折旧；
最大索引=索引数据[0]；
var min_indep=0；
//开始第一个数据集
图_字符串+=索引数据[0]；
对于（变量i=1；i<100；i++）{
图_字符串+=“，”；
graph_string+=Math.round（indepData[i]*Math.pow（10，rlen））/Math.pow（10，rlen）；
如果（索引数据[i]>最大索引）{
最大指数=指数数据[i]；
}
if（indepData[i]最大dep）{
最大dep=depData[i]；
}
}
//结束第一个数据集
最大=Math.max（最大dep，最大indep）；
var最大指数=固定的最大指数（3）；
var最大指数12月半=（（最大指数+最小指数）/2）；
var最大指数12月4日=（最大指数+最小指数）/4.toFixed（3）；
var最大指数十二分之三=（最大指数+最小指数）*0.75）；
最小指数=最小指数固定（3）；
//min_indep=Math.min（min_indep，0）；如果min_indep初始化为0，则不需要
var chart_size=Math.round（最大深度+160）；//增加范围以补偿标题
//警报（最大+”、“+最大深度+”、“+最大深度指数）；
图形_string+=“&chds=“+（最小索引）+”，“+（最大索引）+”，0，“+（最大索引*4/3）。toFixed（3）；//指定范围
//适当更改标签：如果以%的速度，则需要25、50、75、100
如果（xTitle==“%%20速度”）{
最小指数=0；
最大指数=100；
最大指数=50；
最大指数=25；
最大指数=75；
}
最大深度=数学四舍五入（最大深度*100）；
maxist_dep=Math.round（parseInt（maxist_dep，10）/5）*5；//四舍五入到最接近的5
//如果bg为真，则仅使用线性条纹：
//计划在主页面上使用它们，但不在摘要页上使用
如果（背景）{
图_string+=“&chf=c，ls，90，BBBBBB，0.25，dddddddd，0.25”；//线性条纹
}
图_字符串+=“&chco=0000FF”；
//，0000FF“//线条颜色
//图形字符串+=”&chdl=“+seriestle；
//|第二个“//图例
图形_string+=（“&chtt=“+chartTitle）；//图表标题（参数）
功能调整样式（宽度）{
宽度=parseInt（宽度）；
如果（宽度<240）{
图形_字符串+=“&chs=232x”；
}如果（（宽度>=240）和&（宽度<250））{
图形_字符串+=“&chs=232x”；
}如果（（宽度>=250）和&（宽度<260））{
图形_字符串+=“&chs=242x”；
}否则，如果（（宽度>=260）和&（宽度<270））{
图_字符串+=“&chs=252x”；
}否则，如果（（宽度>=270）和&（宽度<280））{
图形_字符串+=“&chs=262x”；
}如果（（宽度>=280）和&（宽度<290））{
图形_字符串+=“&chs=272x”；
}如果（（宽度>=290）和&（宽度<300））{
图_字符串+=“&chs=282x”；
}如果（（宽度>=300）和&（宽度<310））{
图形_字符串+=“&chs=292x”；
}如果（（宽度>=310）和&（宽度<320））{
图形_字符串+=“&chs=302x”；
}否则，如果（（宽度>=320）和&（宽度<330））{
图形_字符串+=“&chs=312x”；
}否则，如果（（宽度>=330）和&（宽度<340））{
图形_字符串+=“&chs=322x”；
}否则如果（（宽度>=340）和（&（宽度<350））{
图形_字符串+=“&chs=332x”；
}如果（（宽度>=350）和&（宽度<360））{
图形_字符串+=“&chs=342x”；
}如果（（宽度>=360）和&（宽度<370））{
图形_字符串+=“&chs=352x”；
}否则，如果（（宽度>=370）和（&（宽度<380））{
图形_字符串+=“&chs=362x”；
}如果（（宽度>=380）和&（宽度<390））{
图形_字符串+=“&chs=372x”；
}否则，如果（（宽度>=390）和&（宽度<400））{
图形_字符串+=“&chs=382x”；
}如果（（宽度>=400）和&（宽度<410））{
图形_字符串+=“&chs=392x”；
}否则，如果（（宽度>=410）和&（宽度<420））{
图形_字符串+=“&chs=402x”；
}如果（（宽度>=420）和&（宽度<430））{
图形_字符串+=“&chs=412x”；
}如果（（宽度>=430）和&（宽度<440））{
图形_字符串+=“&chs=422x”；
}如果（（宽度>=440）和&（宽度<450））{
图形_字符串+=“&chs=432x”；
}如果（（宽度>=450）和&（宽度<460））{
图形_字符串+=“&chs=442x”；
}如果（（宽度>=460）和&（宽度<470））{
图形_字符串+=“&chs=452x”；
}如果（（宽度>=470）和&（宽度<480））{
图形_字符串+=“&chs=462x”；
}否则，如果（（宽度>=480）和&（宽度<490））{
图形_字符串+=“&chs=472x”；
}否则，如果（（宽度>=490）和&（宽度<500））{
图形_字符串+=“&chs=482x”；
}埃尔
function graph(depData, indepData, seriesTitle, title, xTitle, yTitle, chartTitle, bg) {
var rlen = 5;
var graph_string = "http://chart.apis.google.com/chart?cht=lxy";
graph_string += "&chd=t:";
var biggest, biggest_indep, biggest_dep;
biggest_indep = indepData[0];
var min_indep = 0;
//BEGIN FIRST DATA SET
graph_string += indepData[0];
for (var i = 1; i < 100; i++) {
graph_string += ",";
graph_string += Math.round(indepData[i] * Math.pow(10, rlen)) / Math.pow(10, rlen);
if (indepData[i] > biggest_indep) {
biggest_indep = indepData[i];
}
if (indepData[i] < min_indep) {
min_indep = indepData[i];
}
}
biggest_dep = depData[0];
graph_string += "|";
graph_string += Math.round(depData[0] * Math.pow(10, rlen)) / Math.pow(10, rlen);
for (i = 1; i < 100; i++) {
graph_string += ",";
graph_string += Math.round(depData[i] * Math.pow(10, rlen)) / Math.pow(10, rlen);
if (depData[i] > biggest_dep) {
biggest_dep = depData[i];
}
}
//END FIRST DATA SET
biggest = Math.max(biggest_dep, biggest_indep);
var biggest_indep_dec = biggest_indep.toFixed(3);
var biggest_indep_dec_half = ((biggest_indep + min_indep) / 2).toFixed(3);
var biggest_indep_dec_fourth = ((biggest_indep + min_indep) / 4).toFixed(3);
var biggest_indep_dec_three_fourths = ((biggest_indep + min_indep) * 0.75).toFixed(3);
min_indep = min_indep.toFixed(3);
//min_indep = Math.min(min_indep, 0); Shouldn't be necessary if min_indep initialized to 0
var chart_size = Math.round(biggest_dep + 160); //increase range to compensate for title
//alert(biggest + ", " + biggest_dep + ", " + biggest_indep);
graph_string += "&chds=" + (min_indep) + "," + (biggest_indep_dec) + ",0," + (biggest_dep * 4 / 3).toFixed(3); //specify range
//change labels appropriately: if in terms of %Speed, want 25, 50, 75, 100
if (xTitle === "%%20Speed") {
min_indep = 0;
biggest_indep_dec = 100;
biggest_indep_dec_half = 50;
biggest_indep_dec_fourth = 25;
biggest_indep_dec_three_fourths = 75;
}
biggest_dep = Math.round(biggest_dep * 100);
biggest_dep = Math.round(parseInt(biggest_dep, 10) / 5) * 5; //round to the nearest 5
//only use linear stripes if bg is true:
// plan to use them on main page but not on summary page
if (bg) {
graph_string += "&chf=c,ls,90,BBBBBB,0.25,DDDDDD,0.25"; //linear stripes
}
graph_string += "&chco=0000FF";
//,0000FF"; //line colors
//graph_string += "&chdl=" + seriesTitle;
//|Second"; //legend
graph_string += ("&chtt=" + chartTitle); //chart title (parameter)
function adjustStyle(width) {
width = parseInt(width);
if (width < 240) {
graph_string += "&chs=232x";
} else if ((width >= 240) && (width < 250)) {
graph_string += "&chs=232x";
} else if ((width >= 250) && (width < 260)) {
graph_string += "&chs=242x";
} else if ((width >= 260) && (width < 270)) {
graph_string += "&chs=252x";
} else if ((width >= 270) && (width < 280)) {
graph_string += "&chs=262x";
} else if ((width >= 280) && (width < 290)) {
graph_string += "&chs=272x";
} else if ((width >= 290) && (width < 300)) {
graph_string += "&chs=282x";
} else if ((width >= 300) && (width < 310)) {
graph_string += "&chs=292x";
} else if ((width >= 310) && (width < 320)) {
graph_string += "&chs=302x";
} else if ((width >= 320) && (width < 330)) {
graph_string += "&chs=312x";
} else if ((width >= 330) && (width < 340)) {
graph_string += "&chs=322x";
} else if ((width >= 340) && (width < 350)) {
graph_string += "&chs=332x";
} else if ((width >= 350) && (width < 360)) {
graph_string += "&chs=342x";
} else if ((width >= 360) && (width < 370)) {
graph_string += "&chs=352x";
} else if ((width >= 370) && (width < 380)) {
graph_string += "&chs=362x";
} else if ((width >= 380) && (width < 390)) {
graph_string += "&chs=372x";
} else if ((width >= 390) && (width < 400)) {
graph_string += "&chs=382x";
} else if ((width >= 400) && (width < 410)) {
graph_string += "&chs=392x";
} else if ((width >= 410) && (width < 420)) {
graph_string += "&chs=402x";
} else if ((width >= 420) && (width < 430)) {
graph_string += "&chs=412x";
} else if ((width >= 430) && (width < 440)) {
graph_string += "&chs=422x";
} else if ((width >= 440) && (width < 450)) {
graph_string += "&chs=432x";
} else if ((width >= 450) && (width < 460)) {
graph_string += "&chs=442x";
} else if ((width >= 460) && (width < 470)) {
graph_string += "&chs=452x";
} else if ((width >= 470) && (width < 480)) {
graph_string += "&chs=462x";
} else if ((width >= 480) && (width < 490)) {
graph_string += "&chs=472x";
} else if ((width >= 490) && (width < 500)) {
graph_string += "&chs=482x";
} else if ((width >= 500) && (width < 510)) {
graph_string += "&chs=492x";
} else if ((width >= 510) && (width < 520)) {
graph_string += "&chs=502x";
} else if ((width >= 520) && (width < 530)) {
graph_string += "&chs=512x";
} else if ((width >= 530) && (width < 540)) {
graph_string += "&chs=522x";
} else if ((width >= 540) && (width < 550)) {
graph_string += "&chs=532x";
} else if ((width >= 550) && (width < 560)) {
graph_string += "&chs=542x";
} else if ((width >= 560) && (width < 570)) {
graph_string += "&chs=552x";
} else if ((width >= 570) && (width < 580)) {
graph_string += "&chs=562x";
} else if ((width >= 580) && (width < 590)) {
graph_string += "&chs=572x";
} else if ((width >= 590) && (width < 600)) {
graph_string += "&chs=582x";
} else if ((width >= 600) && (width < 610)) {
graph_string += "&chs=592x";
} else if ((width >= 610) && (width < 620)) {
graph_string += "&chs=602x";
} else if ((width >= 620) && (width < 630)) {
graph_string += "&chs=612x";
} else if ((width >= 630) && (width < 640)) {
graph_string += "&chs=622x";
} else if ((width >= 640) && (width < 650)) {
graph_string += "&chs=632x";
} else if ((width >= 650) && (width < 660)) {
graph_string += "&chs=642x";
} else if ((width >= 660) && (width < 670)) {
graph_string += "&chs=652x";
} else if ((width >= 670) && (width < 680)) {
graph_string += "&chs=662x";
} else if ((width >= 680) && (width < 690)) {
graph_string += "&chs=672x";
} else if ((width >= 690) && (width < 700)) {
graph_string += "&chs=682x";
} else if ((width >= 700) && (width < 710)) {
graph_string += "&chs=692x";
} else if ((width >= 710) && (width < 720)) {
graph_string += "&chs=702x";
} else if ((width >= 720) && (width < 730)) {
graph_string += "&chs=712x";
} else if ((width >= 730) && (width < 740)) {
graph_string += "&chs=722x";
} else if ((width >= 740) && (width < 750)) {
graph_string += "&chs=732x";
} else if ((width >= 750) && (width < 760)) {
graph_string += "&chs=742x";
} else if ((width >= 760) && (width < 770)) {
graph_string += "&chs=752x";
} else if ((width >= 770) && (width < 780)) {
graph_string += "&chs=762x";
} else if ((width >= 780) && (width < 790)) {
graph_string += "&chs=772x";
} else if ((width >= 790) && (width < 800)) {
graph_string += "&chs=782x";
} else if ((width >= 800) && (width < 810)) {
graph_string += "&chs=792x";
} else if ((width >= 810) && (width < 820)) {
graph_string += "&chs=802x";
} else if ((width >= 820) && (width < 830)) {
graph_string += "&chs=812x";
} else if ((width >= 830) && (width < 840)) {
graph_string += "&chs=822x";
} else if ((width >= 840) && (width < 850)) {
graph_string += "&chs=832x";
} else if ((width >= 850) && (width < 860)) {
graph_string += "&chs=842x";
} else if ((width >= 860) && (width < 870)) {
graph_string += "&chs=852x";
} else if ((width >= 870) && (width < 880)) {
graph_string += "&chs=862x";
} else if ((width >= 880) && (width < 890)) {
graph_string += "&chs=872x";
} else if ((width >= 890) && (width < 900)) {
graph_string += "&chs=882x";
} else if ((width >= 900) && (width < 910)) {
graph_string += "&chs=892x";
} else if ((width >= 910) && (width < 920)) {
graph_string += "&chs=902x";
} else if ((width >= 920) && (width < 930)) {
graph_string += "&chs=912x";
} else if ((width >= 930) && (width < 940)) {
graph_string += "&chs=922x";
} else if ((width >= 940) && (width < 950)) {
graph_string += "&chs=932x";
} else if ((width >= 950) && (width < 960)) {
graph_string += "&chs=942x";
} else if ((width >= 960) && (width < 970)) {
graph_string += "&chs=952x";
} else if ((width >= 970) && (width < 980)) {
graph_string += "&chs=962x";
} else if ((width >= 980) && (width < 990)) {
graph_string += "&chs=972x";
} else if ((width >= 990) && (width < 1000)) {
graph_string += "&chs=982x";
} else {
graph_string += "&chs=982x";
}
}
jQuery(function() {
adjustStyle(jQuery(this).width());
jQuery(window).resize(function() {
adjustStyle(jQuery(this).width());
});
});
graph_string += chart_size; //y dimension: dynamic
<!DOCTYPE>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
putQR();
});
function putQR(){
var chartParent = $('#chartParent');
var width = $(chartParent).width();
var height = $(chartParent).height();
var source = "https://chart.googleapis.com/chart?chs="+width+"x"+height+"&cht=qr&choe=UTF-8&chl=http://www.kikiriki.org/copy/agtraWtpcmlraW9yZ3IRCxIJQ29weXBhc3RlGPOEDgw";
$(chartParent).append('<img id="qr" src="'+source+'" alt="qr" />');
}
</script>
<style>
#chartParent{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="chartParent"></div>
</body>
</html>
var chart = new google.visualization.LineChart(document.getElementById('myweight'));
chart.draw(data, options);
$(document).ready(function () {
putQR();
});
$(window).resize(function () {
putQR();
});