Question

我需要一些帮助将PHP数据放入谷歌图表。

我创建了一个简单的数组

$chart_arr = array($year, $new_balance);
json_encode($chart_arr);

如果我跑

<?php echo json_encode($chart_arr);?>

我看到以下内容：[2015,1150] [2016,1304.5] [2017,1463.635] [2018,1627.54405] [2019,1796.3703715]，所以我认为（？）我从我的forloop编码正确的数字生成$ year和$ new_balance。

我想在谷歌图表中列出这些数字

<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {


var data = new google.visualization.DataTable();
                data.addColumn('string', 'Year');
                data.addColumn('number', 'Balance');
                data.addRows([
                    <?php echo json_encode($chart_arr);?>
                ]);

或者：

                data.addRows([
                <?php echo $chart_arr;?>
            ]);

然后继续......

var options = {
              title: 'My Savings',
              curveType: 'function',
              legend: { position: 'bottom' } 
};

var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);

}

显示为......

    <div class="grid-container"> 
    <div class="grid-100 grid-parent">
        <div id="curve_chart" style="width: 100%; height: auto"></div>
     </div>   

</div>

我尝试了很多变化，但要么没有将数据输入图表，要么没有显示图表。

有人可以帮助我显示我出错的地方吗？

我看到另一篇使用以下代码的相关帖子：

     $chartsdata[$i] = array($testTime, $testNb);
echo json_encode($chartsdata);

var jsonData = $.ajax({
        url: "test.php",
        dataType: "json",
        async: false
    }).responseText;

    var obj = JSON.stringify(jsonData);
    data.addRows(obj);

这是我需要关注的方法吗？

提前致谢

Answer 1

我发现你在第一个问题之后没有发现如何做到这一点，所以我在这里找到了一个有效的例子，希望这能帮助你戴夫:)。

如果您对此有疑问，请随时提问！

<?php 
//create array variable
$values = [];

//pushing some variables to the array so we can output something in this example.
array_push($values, array("year" => "2013", "newbalance" => "50"));
array_push($values, array("year" => "2014", "newbalance" => "90"));
array_push($values, array("year" => "2015", "newbalance" => "120"));

//counting the length of the array
$countArrayLength = count($values);

?>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Balance');

    data.addRows([

    <?php
    for($i=0;$i<$countArrayLength;$i++){
        echo "['" . $values[$i]['year'] . "'," . $values[$i]['newbalance'] . "],";
    } 
    ?>
    ]);

    var options = {
        title: 'My Savings',
        curveType: 'function',
        legend: { position: 'bottom' } 
    };

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

<div class="grid-container"> 
<div class="grid-100 grid-parent">
    <div id="curve_chart" style="width: 100%; height: auto"></div>
</div>   

</div>

Answer 2

我最近处理了Google Charts API，我提出了一些建议。您编写的PHP代码应该很有用，但它确实需要将您的Javascript代码嵌入到PHP页面中。

也许这对您的目的没有问题，但我建议您将Javascript与PHP分开。一些开发人员可能对一个开发人员感到满意，但另一个开发人员可能不熟悉，因此混合使用这两种语现在，这几乎让您使用AJAX来检索您的JSON图表数据。这是一个很好的方法，但我不喜欢你在问题中提到的代码，原因有几个。

首先，代码使用async: false，这将删除用户在获取数据时对浏览器的控制。换句话说，浏览器似乎会冻结，直到从AJAX请求返回数据。

另外，我不了解整个.responseText惯例。我理解代码的完成情况;我只是不明白为什么作者选择了这种特殊的方法。这就是我要做的事情。

$.ajax({
    url: "test.php",
    dataType: "JSON",
    data: [any POST parameters that you need here],
    type: "POST",
    success: function(json) {
        var jsonData = JSON.parse(json); // jsonData will be a Javascript object or array.
        data.addRows(jsonData);
        drawChart();
    },
    error: function(jxqhr) {
        // Handle a bad AJAX call
    }
});

那么这对整个应用程序有何帮助？好吧，在您的服务器端代码中，您可以通过响应带有HTTP 500错误的AJAX调用来处理任何错误（即错误的用户输入），并且AJAX调用可以将问题传达给您的用户。此外，当您的页面加载时，页面的其余部分将继续加载，而您的AJAX调用是关闭获取数据。

JS Fiddle

Answer 3

json_encode工作得很好，你可以把它放在像var grafica = <?php echo json_encode($grafica); ?> ;这样的变量中（看下面我的例子）或者就像你把它放在你的例子中一样，除了它唯一的问题，就是你有双括号，jaso_encode($chart_arr)对象中的内容和外部data.addRows([ ... ])，为您提供[[...]]并生成和错误，取下括号，尝试这样：

 data.addRows(  
         <?php echo json_encode($chart_arr);?>  
           );

和不这个

  data.addRows([  
     <?php echo json_encode($chart_arr);?>  
       ]);

我已经包含了我如何使用它的示例，请注意在文档中（我认为可能更好）他们将整个代码放在<head>部分，因为它们拥有所有数据在那里，但这可能会导致实际工作示例出现问题，我只在<head>和<body> PHP代码之后的所有Javascript代码中放置了谷歌图表的CDN（内容交付网络），而不是为清晰起见，此示例中包含<div>，但最后一个可以在脚本标记之前。顺序很重要，因为在构建图形之前需要先获取数据。

我希望这会有所帮助。

<!DOCTYPE html>

    <head>

        <meta charset="utf-8"/>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    </head>


<body>

<script type="text/javascript">

      google.charts.load("current", {packages:["corechart"]});       
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
       data.addColumn('string', 'fecha'); // Implicit domain column.
       data.addColumn('number', 'peso'); // Implicit data column.
       data.addColumn({type:'string', role:'annotation'}); // columna para anotaciones
       data.addColumn({type:'string', role:'style'});  // comumna para estilo


    var grafica =  <?php    echo json_encode($grafica);        ?> ;   

       data.addRows(grafica);


        var options = {
        title:'Peso Total', width:600,height:400,
        colors: ['#C0C0C0'],
        curveType: 'function',
          legend: 'none',
          pointSize: 12,
          annotations: {
                textStyle: {
                  fontName: 'Times-Roman',
                  fontSize: 32,
                  color: '#99ff99',
                  opacity: 0.5,
                }

              }

        };

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






 <div id="chart_div" style="margin: 80px auto; width: 650px; height: 450px; border: 2px solid #4CAF50; border-radius: 20px; padding:5px; "></div>


</html>

PHP数组进入谷歌图表

3 个答案: