Question

当我点击一个按钮时，我需要绘制谷歌图表，但我发现它可以使其工作。我创建了一个组合图表，可以显示散点图和折线图。

我想创建一个按钮，在鼠标单击时显示该图形。我尝试使用jquery按钮，但图表没有出现。你能帮我吗？

以下是谷歌图表代码：

<html>
    <head>
        <title>Google Charts </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script>
        $(document).ready(function(){
            $(".btn").click(function(){
                google.load(
                    "visualization", 
                    "1", 
                    {
                        "packages": [ "corechart" ], 
                        "callback": drawChart
                    }
                );
                google.setOnLoadCallback(drawChart);

                <?php
                    $sql = mysql_connect("localhost","root","");
                    if(!$sql)
                    {
                        echo "Connection Not Created";
                    }

                    $con = mysql_select_db("PRJ");

                    if(!$sql)
                    {
                        echo "Database Not Connected";  
                    }

                    $sql = "select * from CF";
                    $result = mysql_query($sql);

                    $count=0;
                    while($row = mysql_fetch_array($result))
                    {
                        $a[]=$row['x'];
                        $b[]=$row['y'];
                        $count++;
                    }

                    $tot=0;
                    $toty=0;
                    $xsqtot=0;
                    $ysqtot=0;
                    $xytot=0;

                    for ($i=0;$i<$count;$i++)
                    {
                        $tot = $tot + $a[$i];
                        $toty = $toty + $b[$i];
                        $xpow[] = $a[$i] * $a[$i];
                        $ypow[] = $b[$i] * $b[$i];
                        $xsqtot = $xsqtot + $xpow[$i];
                        $ysqtot = $ysqtot + $ypow[$i];
                        $product[] = $a[$i] * $b[$i];
                        $xytot = $xytot + $product[$i];
                    }

                    $p = (($tot*$toty)-($count*$xytot))/(($tot*$tot)-($count*$xsqtot));
                    $q = (($xytot*$tot)-($xsqtot*$toty))/(($tot*$tot)-($count*$xsqtot));

                    for ($i=0;$i<$count;$i++)
                    {
                        $cfy[]=($p*$a[$i])+$q;  
                    }

                    $ct=sizeof($a);
                ?>

                var x=new Array();
                <?php
                    for ($i=0;$i<$count;$i++){
                        echo "x[$i]=".$a[$i].";\n";
                    }
                ?>
                                var y=new Array();
                <?php 
                    for ($i=0;$i<$count;$i++){
                        echo "y[$i]=".$b[$i].";\n";
                    }
                ?>

                var z=new Array();
                <?php 
                    for ($i=0;$i<$count;$i++){
                        echo "z[$i]=".$cfy[$i].";\n";
                    }
                ?>

                function drawChart() 
                {
                    var data = new google.visualization.DataTable();
                    data.addColumn('number', 'independent');
                    data.addColumn('number', 'dependent');
                    data.addColumn('number', 'Corrected');
                    for(var i=0;i<x.length;i++)
                    {
                        data.addRows([[x[i],y[i],z[i]]]);
                    }      

                    var options = {
                        'title': 'LAT VS LONG ',
                        'vAxis': {
                            title: 'Dependent variable (Y)'
                        },
                        hAxis: {
                            title: 'Independent variable (X)'
                        },
                        'width':550,
                        'height':400,
                        seriesType:'scatter',
                        series: {
                            1: {
                                type: 'line'
                            }
                        },
                    };
                    var chart = new google.visualization.ComboChart(document.getElementById('chart'));
                    chart.draw(data, options);
                }
            });
        });
    </script>
    </head>
    <body>
    <button class="btn">Plot chart!</button>
    <div id="chart" style="width: 900px; height: 500px;"></div>
    </body>
</html>

单击按钮后绘制谷歌图表

0 个答案: