javascript - 数据数组中带有 php 循环的谷歌图表不显示

Question

我正在尝试在 google 图表中显示一些 PHP 代码。我在同一页面上有另一个图表，使用相同的流程，其中一个工作正常，但由于某种原因，第二个图表未显示。

我在 PHP 中有一个键值数组，我知道它包含我需要的信息，因为我已经用这个循环测试了它。

foreach($categoryKeyValues as $key => $value){
    echo "['".$key.' '.$_SESSION['currency'].number_format($value,2)."', 
    ".number_format($value,2)."],";
}

并且它显示正确，因此数据就在那里。

这是循环的输出['娱乐 167.99 英镑', 167.99],['其他 0.00 英镑', 0.00],['账单 1,155.81 英镑', 1,155.81],['驾驶 225.00 英镑', 225.00],['借款 126.58 英镑', 126.58], ['节省 187.00 英镑', 187.00],['场合 87.50 英镑', 87.50],['保险 37.00 英镑', 37.00],

当我调用 javascript 来显示图表时，出现错误并且图表未显示。这是我的图表代码。

<!-- Graph for Categorised expenditure -->
<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});  
    google.charts.setOnLoadCallback(drawCategory);
    function drawCategory()
    {
        var data = google.visualization.arrayToDataTable([
                ['Category', 'Total'],
                <?php
                    foreach($categoryKeyValues as $key => $value)
                    {
                        if($value > 0){
                            echo "['".$key.' '.$_SESSION['currency'].number_format($value,2)."', ".number_format($value,2)."],";
                            $atotal = $atotal + $value;
                        }
                    }
                    //$title = "Account Type, Total - ".$total;
                 ?>
             ]);
        var options = {
              is3D:true,
              chartArea: {left: '1%', top: '5%', right:'1%', width: '95%', height: '100%'},
              width: $(window).width()*0.50,
              height: $(window).width()*0.20,
              pieSliceText: 'none',
              sliceVisibilityThreshold: 0.00,
              pieHole:0.4,
              tooltip: {
                isHtml:true,
                showColorCode: true,
                trigger: 'hover'
              },
              colors: ['#204969', '#719192', '#5f6769', '#5c94bd','#1a3e59', '#315b96', '#719192', '#3c4245', '#dadada']
             };
        var chart = new google.visualization.PieChart(document.getElementById('categoryChart'));  
        chart.draw(data, options);
    }
    // And then:
    $(window).resize(function () {
        drawCategory();
    });
</script>

Image of the working graph and result of the loop for the second graph underneath where the second graph should appear.

Answer 1

好的，经过几个小时的错误检查和测试，我发现了问题。最后很简单，但很难找到，所以我在这里发布我的发现，希望这能帮助以后的人。

事实证明错误出在 php number_format 中。当我的数据库结果返回大于 1000.00 的数字时，我使用 number_format($number,2) ，结果作为 1,000.00 保存在数组中，创建了一个额外的数组索引，这又在我的谷歌图表中创建了一个额外的列。这导致了异常。

我通过使用 number_format($cvalue,2,'.','') 解决了这个问题。我的图表现在显示如下。