Question

我正在尝试使用来自MYSQL数据库的数据显示谷歌图表。当我使用两个单独的文件（php / js）时我会工作，但我想在一个文件中处理数据。

继承人所得到的：

$table = array();
        $table['cols'] = array(
            array('label' => 'Date', 'type' => 'string'),
            array('label' => 'Meter', 'type' => 'number')
        );
        $rows = array();

        $select->execute();
        while ($result = $select->fetch(PDO::FETCH_ASSOC)) {

            $timestamp = strtotime($result['date']);
            $date = date("d.m.Y - H:i", $timestamp);

            $temp = array();
            $temp[] = array('v' => $date);
            $temp[] = array('v' => $result['meter']);
            $rows[] = array('c' => $temp);
        }
        $table['rows'] = $rows;
        $json = json_encode($table);

        echo $json;

        ?>

        <html>
        <head>
            <script type="text/javascript" src="../assets/js/loader.js"></script>

            <script type="text/javascript">
                google.charts.load('current', {'packages':['corechart']});

                google.charts.setOnLoadCallback(drawChart);

                function drawChart() {
                    var jsonData = $.ajax({
                        dataType: "json",
                        async: true
                    }).responseText;

                    alert(jsonData);

                    var data = new google.visualization.DataTable(jsonData);

                    var chart = new google.visualization.LineChart(document.getElementById('chart_div2'));
                    chart.draw(data, {width: 1000, height: 240});
                }

            </script>
        </head>
        <body>
            <hr class="major" />

            <div id="chart_div2"></div>
        </body>
        </html>

PHP数据被正确编码但我不知道如何将数据“发送”到javascript部分。是否可以在同一个文件中接收JSON数据？当我将async: true更改为false时，它只会显示整个页面中的代码，true会显示undefined。

亲切的问候， SKÄR

Answer 1

当你以这种方式回应$ json时

<?php
// ...getting data
?>
<script>
var jsonData = <?php echo $json; ?>;
</script>
<?php 
// rest of page...

您可以稍后在javascript中使用它，不再需要ajax。

//....
chart.draw(jsonData, {width: 1000, height: 240});
//....

从同一文件中获取JSON数据

1 个答案: