2

Is there a way to make a Google Chart full screen on click?

I've been playing around with this for hours

JS - 

 $('#chart_div').on('click', function(e) {
     $(this).css({
         width: "100%",
         height: "100%",
         margin: "0",
         border: "none"

     });
 });

CSS - 

#chart_div {
    width: 100 px;
    height: 100 px;
    margin: 20 px;
    background - color: red;
    border: 1 px solid black;
}
body, html {
    height: 100 % ;
}

​</p>

HTML - You are free to copy and use this sample in accordance with the terms of the Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>
        Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1', {
            packages: ['corechart']
        });
    </script>
    <script type="text/javascript">
        google.load("visualization", "1", {
            packages: ["corechart"]
        });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Year', 'Sales', 'Expenses'],
                ['November', 1000, 400],
                ['December', 1170, 460],
                ['January', 660, 1120],
                ['February', 690, 1120],
                ['March', 780, 1120],
                ['April', 820, 1120],
                ['May', 660, 1120],
                ['June', 1030, 540]
            ]);

            var options = {
                title: '',
                backgroundColor: 'none',
                legend: {
                    position: 'none'
                },
                hAxis: {
                    title: 'Year',
                    titleTextStyle: {
                        color: 'grey'
                    }
                },
                chartArea: {
                    left: 40,
                    top: 10,
                    width: 900,
                    height: 350
                }
            };

            var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }

        $('#chart_div').on('click', function(e) {
            $(this).css({
                width: "100%",
                height: "100%",
                margin: "0",
                border: "none"

            });
        });
    </script>
</head>

<body style="font-family: Arial;border: 0 none;">
    <div id="chart_div"></div>
</body>

</html>
​

​</p>

http://jsfiddle.net/FbKEL/5/

Any help is much appreciated.

4

1 回答 1

7

Can't you just call drawChart again?

$('#chart_div').on('click',function(e){
    $(this).css({
        width:"100%",
        height:"100%",
        margin:"0",
        border:"none"  
    });
    drawChart();
});

See here

于 2013-01-07T19:21:26.697 回答