我有一个问题，我正在开发一个网络应用，我有一些谷歌图表涉及它。我已经成功地设法根据屏幕大小改变图形的大小，虽然我想知道的是，如果有人在将手机或平板电脑从纵向切换到横向后有任何方法可以改变图表大小。现在，一旦图表图表，并且您切换手机方向，图表保持相同的大小，所以实际上它只检测手机屏幕的大小，一旦您第一次有图表图表。
以下是一些代码（如果有人有更好的方法，请告诉我......）
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
答案 0 :(得分：1)
一种解决方案可能是获取容器的度量，然后创建具有您感兴趣的高度和宽度的图形。
<!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>
答案 1 :(得分：1)
我查看了@Antonio的解决方案并想出了一个不同的解决方案。
我在Google Chart脚本中包含了Antonio的功能，并将putQR功能包含在Google Chart Options和
中。var chart = new google.visualization.LineChart(document.getElementById('myweight'));
chart.draw(data, options);
除了......
$(document).ready(function () {
putQR();
});
......我还补充说......
$(window).resize(function () {
putQR();
});
...为了在用户调整浏览器大小时调整图表大小。
我想这是你要求的实际功能，因为它会在浏览器宽度改变时调整图形大小，即从普通手持电话切换到横向时必须是相同的。
我还补充说graphHeight应该是graphWidth的80％并且不高于800.
...你可以在Pixic.se
上看到它