javascript - 再次关于如何在 ajax 调用后绘制谷歌图表

标签 javascript php ajax google-visualization

编辑开始

因为我没有收到任何答复，所以我会尝试解释，或者更好的是，展示对我有用的东西(没有 ajax)和现在当我尝试使用 ajax 时不起作用的东西。示例胜于 Eloquent ，我将写下代码的重要部分。

我有两个文件，即 index.php，其中是输入表单和绘制图表的位置，以及 script.php，它接收表单中插入的内容，用它进行查询并返回一个返回索引的变量.php 仅用于 Google 内容。

所以你在这里:

索引.php

<?php
    session_start();
?>

<!DOCTYPE html>
<html lang="en">
    <head>
    <!-- Google Charts -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"],callback:drawChart01});
        google.setOnLoadCallback(drawChart01);

        // CHART 01
        function drawChart01() {
            var data = google.visualization.arrayToDataTable([
                ['Technological Area', 'Number of Publications'],
                <?php echo $_SESSION['techAreas03']; ?>
            ]);

            var options = {
                chartArea: {width:'100%',height:'100%'},
                forceIFrame: 'false',
                is3D: 'true',
                pieSliceText: 'value',
                sliceVisibilityThreshold: 1/20, // Only > 5% will be shown.
                titlePosition: 'none'
            };

            var chart = new google.visualization.PieChart(document.getElementById('tech-areas'));
            chart.draw(data, options);
        }
    </script>
    </head>

    <body>
        <form id="publn-nr-srch" action="script.php" method="post" role="form">
            <input id="publn-in" name="publn-in" placeholder="Publication Number" type="text" required />
            <input id="btn-srch" type="submit" value="Search">
        </form>

        <?php
            if(isset($_SESSION['techAreas03'])){
                echo '<div id="tech-areas"></div>';
            }
        ?>
    </body>
</html>

和 script.php:

<?php
session_start();

# Query
$sql = "SELECT techarea FROM $table WHERE publn = :publn";
$q = $conn->prepare($sql);
$q->execute(array(':publn' => $_POST['publn-in']));

while ($r = $q->fetch(PDO::FETCH_ASSOC)) {
    $techAreas00[] = ($r['techarea']);
}

# Separate values of the array that are together in only one field and put them into another array.
$techAreas01 = explode(', ', implode(', ', $techAreas00));

# Count values.
$techAreas02 = array_count_values($techAreas01);

# Sort array.
arsort($techAreas02);

# Transform array in a string that will be used in GOOGLE CHART.
$techAreas03 = implode(', ', array_map(function ($v, $k) { return '[\''.$k.'\','. $v.']'; }, $techAreas02, array_keys($techAreas02)));

$_SESSION['techAreas03'] = $techAreas03;

# Reload index.php, but now with the variable $techAreas03 that will be used in the head to populate the GOOGLE CHART.
header(Location: index.php);

这项工作很好。

现在，当我尝试使用 ajax 来避免重新加载 index.php 时，我无法绘制图表。问题是在 script.php 创建变量之前已经加载了 Google 脚本。有关以下原始答案中的问题的更多信息。

修改后的页面代码如下:

索引.php

<?php
    session_start();
?>

<!DOCTYPE html>
<html lang="en">
    <head>

    <!-- Google Charts -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"],callback:drawChart01});
        google.setOnLoadCallback(drawChart01);

        // CHART 01
        function drawChart01() {
            var data = google.visualization.arrayToDataTable([
                ['Technological Area', 'Number of Publications'],
                <?php echo $techAreas03; ?>
            ]);

            var options = {
                chartArea: {width:'100%',height:'100%'},
                forceIFrame: 'false',
                is3D: 'true',
                pieSliceText: 'value',
                sliceVisibilityThreshold: 1/20, // Only > 5% will be shown.
                titlePosition: 'none'
            };

            var chart = new google.visualization.PieChart(document.getElementById('tech-areas'));
            chart.draw(data, options);
        }
    </script>
    </head>

    <body>
        <form id="publn-nr-srch" action="" method="post" role="form">
            <input id="publn-in" name="publn-in" placeholder="Publication Number" type="text" required />
            <input id="btn-srch" type="submit" value="Search">
        </form>

        <div id="ajax"></div>

    </body>
    <script type="text/javascript">
    $(function(){
        $('form#publn-nr-srch').submit(function(){
            $.ajax({
                url: 'script.php',
                type: 'POST',
                data: $('form#publn-nr-srch').serialize(),
                success: function(response) {
                    $('div#ajax').html(response);
                }
            });
            return false;
        });
    });
    </script>
</html>

这里是 script.php:

<?php
session_start();

# Query
$sql = "SELECT techarea FROM $table WHERE publn = :publn";
$q = $conn->prepare($sql);
$q->execute(array(':publn' => $_POST['publn-in']));

while ($r = $q->fetch(PDO::FETCH_ASSOC)) {
    $techAreas00[] = ($r['techarea']);
}

# Separate values of the array that are together in only one field and put them into another array.
$techAreas01 = explode(', ', implode(', ', $techAreas00));

# Count values
$techAreas02 = array_count_values($techAreas01);

# Sort array.
arsort($techAreas02);

# Transform array in a string that will be used in GOOGLE CHART.
$techAreas03 = implode(', ', array_map(function ($v, $k) { return '[\''.$k.'\','. $v.']'; }, $techAreas02, array_keys($techAreas02)));

我对这个问题进行了研究，我发现很多线程都在讨论使用 ajax 绘制图表的回调函数，但是如果我们已经有了构建图表的数据。问题是我没有找到任何特定于我的问题的答案，因为我必须通过 ajax 发送另一个数据(即发布号 = publn-in)开始查询并且该查询的结果是将被谷歌图表使用。

我希望我现在能更明白一点，希望你们能帮助我。

如前所述，下面有更多信息，您可以随时询问更多信息。

非常感谢!

编辑结束

原始帖子开始

我有一个表单，用于通过 ajax 将信息发送到 php 脚本。

此脚本获取此信息、查询数据库并返回一个数组，我将其转换为字符串。

此字符串将用于绘制谷歌图表。 我搜索了如何在 ajax 调用后绘制图表，但无法获得预期的结果。

问题是 已经加载，我们必须使用回调来绘制图表。

这是我的代码:

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>

        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart04);
            function drawChart04() {
                var data = google.visualization.arrayToDataTable([
                    ['Publication', 'Similarity'],
                    <?php echo $chart; ?>
                ]);

                var options = {
                    chartArea: {width:'80%',height:'80%'},
                    forceIFrame: 'true',
                    titlePosition: 'none',
                    hAxis: {title: 'Most Similar Publications', textPosition: 'none'},
                    legend: {position: 'none'}
                };

                var chart = new google.visualization.LineChart(document.getElementById('sim-curve'));
                chart.draw(data, options);
            }
        </script>
    </head>

    <body>
        <form id="publn-nr-srch" action="" method="post" role="form">

            <input class="form-control" id="publn-in" name="publn-in" placeholder="Publication Number" type="text" value="" required />

            <input id="btn-srch" class="btn btn-sm btn-primary" type="submit" value="&nbsp;Search&nbsp;">

        </form>

        <div id="ajax"></div>

    </body>

    <script type="text/javascript">
    $(function(){
        $('form#publn-nr-srch').submit(function(){
            $.ajax({
                url: '../models/pubSearchScr.php',
                type: 'POST',
                data: $('form#publn-nr-srch').serialize(),
                success: function(response) {
                    $('div#ajax').html(response);
                }
            });
            return false;
        });
    });
    </script>
</html>

脚本运行后，我收到，例如，变量中的以下字符串(此处一切运行良好):

$chart = "['1977',8], ['1978',31], ['1979',48], ['1980',34], ['1981',30], ['1982',37], ['1983',28], ['1984',31], ['1985',40], ['1986',32], ['1987',44], ['1988',42], ['1989',45], ['1990',43], ['1991',36], ['1992',31], ['1993',34], ['1994',26], ['1995',25], ['1996',41], ['1997',35], ['1998',27], ['1999',25], ['2000',14], ['2001',31], ['2002',19], ['2003',16], ['2004',21], ['2005',20], ['2006',12], ['2007',16], ['2008',29], ['2009',10], ['2010',13], ['2011',22], ['2012',2], ['2013',2]";

我在 google 的东西中使用它(在上面的 head session 中也看到了 - ):

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart04);
    function drawChart04() {
        var data = google.visualization.arrayToDataTable([
            ['Publication', 'Similarity'],
            <?php echo $chart; ?>
        ]);

        var options = {
            chartArea: {width:'80%',height:'80%'},
            forceIFrame: 'true',
            titlePosition: 'none',
            hAxis: {title: 'Most Similar Publications', textPosition: 'none'},
            legend: {position: 'none'}
        };

        var chart = new google.visualization.LineChart(document.getElementById('sim-curve'));
        chart.draw(data, options);
    }
</script>

在脚本中，我还有以下在结尾中回显的变量。最后我可以在屏幕上看到 html 内容，但看不到图表:

$output = '
            <!-- Similarity Curve -->
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <i class="fa fa-line-chart"></i>
                            Similarity Curve
                        </div>
                    </div>
                    <div class="panel-body">
                        <div id="sim-curve"></div>
                    </div>
                </div>
            </div>';

echo $output;

我理解这个问题，在我运行 ajax 调用之前，带有 google chart 信息的头部已经在没有 $chart 变量的情况下加载。然后当我启动它时一切顺利，但无法绘制图表。在我的研究中，我读到了回调函数等，我认为它已经在我的代码中了。如果没有，我的情况和 WHERE 究竟需要什么？在 head 中还是在 html 代码中间，还是在脚本中？

一个建议:当我在没有 ajax 的情况下做同样的事情时，即使用将信息发送到 php 脚本的 html 表单，然后脚本被重定向回文件，一切正常，因为头部再次加载了整个页面。我的问题是当我必须使用惊人的 ajax 时。

如有任何帮助，我们将不胜感激。 非常感谢。

原帖结束

最佳答案

首先，您应该创建一个函数，用于使用输入的图表数据绘制谷歌图表。 

Example: drawChart(inputData) = drawChart04(data);

其次，您创建一个存储图表数据的变量:

//var inputData = your data;
var inputData = google.visualization.arrayToDataTable([
        ['Publication', 'Similarity'],
        <?php echo $chart; ?>
    ]);

第三，你必须知道如何在服务器(PHP)上使用ajax返回数据:

Example: dataChart = you query or to do something to get it;
echo json_encode(dataChart); exit; //This is just an example.

第四，您必须知道如何将数据从 PHP 传递到 Javascript。我的意思是当您收到响应时，您必须知道如何基于响应构建 inputData。

$.ajax({url: "....php", type: "POST", dataType: "json", data:{..}})
.done(function(response){
   inputData = response; //You have to convert response to inputData. Maybe Json.parse(response).
   //I don't know, You have to know that you response. So find the best way to create inputData.
   drawChart(inputData);//And finally call this function
});

就是这样。我想你可以理解我上面提到的。如果你不能解决这个问题。通过我的 Skype 给我发消息。我会为你修好。 SkypeID:jewelnguyen8

关于javascript - 再次关于如何在 ajax 调用后绘制谷歌图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26817581/

上一篇：php - 动态更改 Bootstrap 网格方向(从 ltr 到 rtl 或反向)

下一篇：php - 如何使用其依赖项运行 PHPUnit 测试

相关文章：

javascript - 使用 lua.vm.js 在 javascript 中迭代 Lua 表

javascript - laravel 自动完成 TextView

javascript - 尝试用javascript在html中制作一个按钮

php MySQL 实现搜索功能

php - mysql删除查询中的两个WHERE条件

javascript - 加载的 div Accordion 在窗口而不是容器 div 中打开

php - 像谷歌搜索一样在 div 中加载外部 url

jquery - 元素内第一个元素的目标内容

javascript - 文本在输出中垂直上下跳动。使用 "document.getElementById("firstDiv").innerHTML = document.getElementById ("location").value;"

php - 如何在laravel中以特定id的模式显示数据？

©2024 IT工具网  联系我们