I have a question, I am working on a web app, and I have some google charts involved with it. I have successfully managed to get the size of the graphs to change depending on the screen size, although what I want to know is, if there is any way to have the charts change size after someone switches their phone or tablet from portrait to landscape. Right now, once the charts graph, and you switch your phone orientation, the graphs stay the same size, so really it only detects what size the phone screen is once you have the charts graph the first time.
我有一个问题，我正在开发一个网络应用程序，我有一些谷歌图表涉及它。我已成功设法根据屏幕尺寸改变图形的大小，虽然我想知道的是，如果有人在将手机或平板电脑从纵向切换到横向后有任何方法可以改变图表大小。现在，一旦图表图表，并且您切换手机方向，图表保持相同的大小，所以实际上它只检测手机屏幕的大小，一旦您有第一次图表图表。
Here is some code (if anyone has a better way of doing this, please let me know...)
这是一些代码（如果有人有更好的方法，请告诉我......）
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
2 个解决方案
#1
1
One solution may be to obtain measures of the container and then create the graph with the height and width that interests you.
一种解决方案可能是获取容器的度量，然后创建具有您感兴趣的高度和宽度的图形。
<!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>
#2
1
I looked at @Antonio's solution and came up with a different solution.
我看了@ Antonio的解决方案，想出了一个不同的解决方案。
I included Antonio's function in the Google Chart script and wrapped the putQR function around the Google Chart Options and the
我在Google Chart脚本中包含了Antonio的功能，并将putQR功能包含在Google Chart Options和
var chart = new google.visualization.LineChart(document.getElementById('myweight'));
chart.draw(data, options);
Beside the...
除了......
$(document).ready(function () {
putQR();
});
...I also added...
......我还补充说......
$(window).resize(function () {
putQR();
});
...in order to have the Chart resized whenever a user resizes the browser.
...为了在用户调整浏览器大小时调整图表大小。
I guess this is the actual function that you are asking for, as it resizes the graph when the browser width is changed, i.e. must be the same thing when switching from normal handheld phone to landscape.
我想这是你要求的实际功能，因为它在浏览器宽度改变时调整图形大小，即从普通手持电话切换到横向时必须是同样的事情。
I also added that the graphHeight should be 80% of graphWidth and not higher than 800.
我还补充说graphHeight应该是graphWidth的80％而不是800。
Check out the code here...
的jsfiddle
...and you can see it live on Pixic.se
......你可以在Pixic.se上看到它
#1
1
One solution may be to obtain measures of the container and then create the graph with the height and width that interests you.
一种解决方案可能是获取容器的度量，然后创建具有您感兴趣的高度和宽度的图形。
<!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>
#2
1
I looked at @Antonio's solution and came up with a different solution.
我看了@ Antonio的解决方案，想出了一个不同的解决方案。
I included Antonio's function in the Google Chart script and wrapped the putQR function around the Google Chart Options and the
我在Google Chart脚本中包含了Antonio的功能，并将putQR功能包含在Google Chart Options和
var chart = new google.visualization.LineChart(document.getElementById('myweight'));
chart.draw(data, options);
Beside the...
除了......
$(document).ready(function () {
putQR();
});
...I also added...
......我还补充说......
$(window).resize(function () {
putQR();
});
...in order to have the Chart resized whenever a user resizes the browser.
...为了在用户调整浏览器大小时调整图表大小。
I guess this is the actual function that you are asking for, as it resizes the graph when the browser width is changed, i.e. must be the same thing when switching from normal handheld phone to landscape.
我想这是你要求的实际功能，因为它在浏览器宽度改变时调整图形大小，即从普通手持电话切换到横向时必须是同样的事情。
I also added that the graphHeight should be 80% of graphWidth and not higher than 800.
我还补充说graphHeight应该是graphWidth的80％而不是800。
Check out the code here...
的jsfiddle
...and you can see it live on Pixic.se
......你可以在Pixic.se上看到它