Question

我有以下一些代码，使用google.visualisation基于我在3个数组中存储的SQL表中的值（即$TotalView，$TotalFemaleView和{ {1}}）在PHP部分中。我使用json_encode（引用this链接），所以我可以在JavaScript中使用这些数组。但我无法访问数组元素来绘制图形。我试过显示数组的值，它们是正确的。

$TotalMaleView

有人能指出我正确的方向吗？

Answer 1

好的，我解决了。在google.visualization函数中使用它们之前必须在eval（）函数中传递数组。

google.charts.load('current', 
        { callback: function () 
            {   
                for ( y = 0; y < <?php echo $rowcount ?>; y++) 
                {
                    array1[y]=eval(array1[y]);  
                    array2[y]=eval(array2[y]);  
                    array3[y]=eval(array3[y]);  

                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'list');
                    data.addColumn('number', 'Viewers');
                    data.addRows([ 
                                    ['TotalViewers',array1[y]],
                                    ['Female Viewers', array2[y]],
                                    ['Male Viewers', array3[y]]
                                ]);
                    var options = {title:array4[y],width:400,height:300};

                    var container = document.getElementById('stats').appendChild(document.createElement('div'));
                    var chart = new google.visualization.ColumnChart(container);
                    chart.draw(data, options);
                }
            },
            packages: ['corechart']
        });

修改

我发现导致问题的原因是eval（）的更好解决方案。

json_encode将元素存储为数组中的字符串（从我的源代码here可以看到）。

根据this，这是一个特定于PHP版本的问题，有几个解决方法：

将标记JSON_NUMERIC_CHECK添加到json_encode函数。所以就我而言，它将是：var array1 = <?php echo json_encode($TotalView,JSON_NUMERIC_CHECK);?>。但是，根据一些评论，这在certain个案例中是不可靠的。

另一种解决方案是在从数据库中读取数据库元素时将其修复到PHP部分。 $TotalView[$x]=(int)$row['Total View Count']。所以这将数据库元素Total View Count存储为整数 TotalView数组。

Answer 2

根据您的评论和更新的PHP代码中的信息，您从数据库查询返回的数据似乎具有字符串形式的数字。在使用eval()或Javascript Number对象之前，如果您查看了浏览器控制台，那么您可能会看到如下错误：

未捕获错误：类型不匹配。值12与列索引1中的类型编号不匹配

有多种方法可以解决此问题（不使用eval()）：

Type cast值为integer或float

$TotalView[$x] = (float)$row["Total View Count"];

将JSON_NUMERIC_CHECK标志与json_encode一起使用（有关详细信息，请参阅this answer）。
```
var array1 = <?php echo json_encode($TotalView, JSON_NUMERIC_CHECK );?>;
```
但要注意使用该常量有一些缺点（例如，参见this article）。

见this updated phpfiddle。如您所见，我创建了一个类来模拟数据库查询（因为我在该沙箱中没有数据库连接）但允许创建相同的数组。

请运行该小提琴，并在浏览器控制台中检查输出。注意json_encode()的结果如何在Javascript中生成有效数组，如：

var array1 = [12,10,6];
var array2 = [8,4,1];
var array3 = [4,6,5];
var array4 = ["Audi","BMW","Suzuki"];

有趣的是，无序列表标记（即<ul id="stats">）（被视为flow content）会添加到示例代码中的head tag。 head标记仅允许meta-data content。将无序列表标记移至body tag。

请参阅下面的代码段中演示的输出。

var array1 = [22, 16, 35, 11];
var array2 = [10, 3, 4, 9];
var array3 = [12, 13, 31, 2];

google.charts.load('current', {
  callback: function() {
    for (var y = 0; y < array1.length; y++) {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'list');
      data.addColumn('number', 'Viewers');
      data.addRows([
        ['TotalViewers', array1[y]],
        ['Female Viewers', array2[y]],
        ['Male Viewers', array3[y]]
      ]);
      var options = {
        title: 'Ad 1',
        width: 400,
        height: 300
      };
      var container = document.getElementById('stats').appendChild(document.createElement('div'));
      var chart = new google.visualization.ColumnChart(container);
      chart.draw(data, options);
    }
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<ul id="stats"></ul>

如何在google.visualization图表中使用javascript数组元素

2 个答案: