PHP数组进入谷歌图表

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编码生成$的正确数字年和$ 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

我看到您在第一个问题之后仍未找到解决方法，因此在此为您提供了一个可行的示例，希望对您有所帮助（Dave :)。

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

<?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>