3

我有一个问题，我正在开发一个网络应用程序，并且我有一些谷歌图表。我已经成功地使图表的大小根据屏幕大小而改变，尽管我想知道的是，在有人将手机或平板电脑从纵向切换到横向之后，是否有任何方法可以改变图表的大小。现在，一旦图表绘制出来，并且您切换手机方向，图表就会保持相同的大小，所以实际上它只会在您第一次看到图表时检测手机屏幕的大小。

这是一些代码（如果有人有更好的方法，请告诉我......）

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
4

2 回答 2

1

我查看了@Antonio 的解决方案并想出了一个不同的解决方案。

我将 Antonio 的函数包含在 Google Chart 脚本中，并将 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。

看看这里的代码...

JSfiddle

...你可以在Pixic.se上看到它

于 2013-11-26T03:46:44.187 回答
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+"&amp;cht=qr&amp;choe=UTF-8&amp;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>
于 2012-07-19T16:13:16.270 回答