如何在google.visualization图形中使用javascript数组元素_Javascript_Php_Html_Google Visualization

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

javascript php html google-visualization

如何在google.visualization图形中使用javascript数组元素,javascript,php,html,google-visualization,Javascript,Php,Html,Google Visualization,我有下面一段代码，使用google.Visualization在循环中绘制图形，它基于SQL表中的值，我将SQL表存储在PHP部分的3个数组中（即$TotalView，$TotalFemaleView和$TotalMaleView）。我使用json_encode（参考链接），因此可以在JavaScript中使用这些数组。但是我无法访问数组元素来绘制图形。我尝试过显示数组的值，它们是正确的 <?php $servername = "localhost"; $username = "root"

我有下面一段代码，使用google.Visualization在循环中绘制图形，它基于SQL表中的值，我将SQL表存储在PHP部分的3个数组中（即

$TotalView

，

$TotalFemaleView

和

$TotalMaleView

）。我使用json_encode（参考链接），因此可以在JavaScript中使用这些数组。但是我无法访问数组元素来绘制图形。我尝试过显示数组的值，它们是正确的

<?php
$servername = "localhost";
$username = "root";
$password = "root123";
$dbname = "test";

$AdName=[];
$TotalView=[];
$TotalMaleView=[];
$TotalFemaleView=[];
$rowcount=0;

// Create connection
$con = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if ($con->connect_error) {
    die("Connection failed: " . $con->connect_error);
} 

$result=mysqli_query($con,"SELECT `Ad Name`,`Total View Count`, `Total Female Viewers`, `Total Male Viewers` FROM `addata` WHERE `Disp Id`=1");

$rowcount=mysqli_num_rows($result);

if(!$result) {
      die('Could not get data: ' . mysql_error());
    }
    // output data of each row 
    for($x = 0; $x < $rowcount; $x++)
    {
        $row = $result->fetch_assoc();
        $TotalView[$x]=$row["Total View Count"];
        $TotalFemaleView[$x]=$row["Total Female Viewers"];
        $TotalMaleView[$x]=$row["Total Male Viewers"];
        $AdName[$x]=$row["Ad Name"];
    }

$con->close();
?>
<html>
  <body>

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

    var array1 = <?php echo json_encode($TotalView);?>;
    var array2 = <?php echo json_encode($TotalFemaleView);?>;
    var array3 = <?php echo json_encode($TotalMaleView);?>;
    var array4 = <?php echo json_encode($AdName);?>;

    google.charts.load('current', 
    { callback: function () 
        {   
            for ( y = 0; y < <?php echo $rowcount ?>; 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']
    });

</script>
  </body>

</html>



var array1=；
var array2=；
var array3=；
var array4=；
google.charts.load（'current'，
{回调：函数（）
{   
对于（y=0；y<；y++）
{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'list'）；
data.addColumn（'number'，'Viewers'）；
data.addRows（[
['TotalViewer'，数组1[y]]，
[‘女性观众’，array2[y]]，
[‘男性观众’，array3[y]]
]);
var options={title:array4[y]，宽度：400，高度：300}；
var container=document.getElementById（'stats'）.appendChild（document.createElement（'div'））；
var chart=新的google.visualization.ColumnChart（容器）；
图表绘制（数据、选项）；
}
},
软件包：['corechart']
});

有人能给我指一下正确的方向吗

好吧，我解决了。在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']
        });

google.charts.load（'current'，
{回调：函数（）
{   
对于（y=0；y<；y++）
{
阵列1[y]=评估（阵列1[y]）；
array2[y]=eval（array2[y]）；
阵列3[y]=评估（阵列3[y]）；
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'list'）；
data.addColumn（'number'，'Viewers'）；
data.addRows（[
['TotalViewer'，数组1[y]]，
[‘女性观众’，array2[y]]，
[‘男性观众’，array3[y]]
]);
var options={title:array4[y]，宽度：400，高度：300}；
var container=document.getElementById（'stats'）.appendChild（document.createElement（'div'））；
var chart=新的google.visualization.ColumnChart（容器）；
图表绘制（数据、选项）；
}
},
软件包：['corechart']
});

编辑：

我找到了导致问题的原因以及eval（）的更好解决方案

json_encode

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

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

将标志
```
JSON\u NUMERIC\u CHECK
```
添加到
```
JSON\u encode
```
函数中。所以在我的例子中，它将是：
```
var array1=
```
。但根据一些评论，这在某些情况下是不可靠的
另一个解决方案是在从数据库读取数据库元素时在PHP部分修复它<代码>$TotalView[$x]=（int）$row['Total View Count']。所以这将数据库元素，
```
总视图计数
```
存储为
```
TotalView
```
数组

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

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

有多个选项可解决此问题（不使用）：

在PHP中将值作为或添加到输出数组时

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

将标志与json_encode一起使用（有关更多信息，请参阅）

有趣的是，无序列表标记（即，

）被添加到示例代码中的。头标签只允许。将无序列表标记移动到

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

vararray1=[22,16,35,11]；
var array2=[10,3,4,9]；
var array3=[12,13,31,2]；
google.charts.load（'current'{
回调：函数（）{
对于（变量y=0；y

一个技巧是执行console.log（array1）并查看它的外观，也许它没有被array1[0]@Bear访问，我已经检查过了，它很好。数组存储了正确的值。但我已经解决了！阵列是什么样子的？请阅读@SamOnela，它们是一个数字数组。（例如，数组1[]={22,17,35,11}）我很感激你为此抽出时间，但请原谅我的无知，因为我仍然不知道我做错了什么！我很确定我的SQL语句是正确的，除此之外，我的
var array1 = <?php echo json_encode($TotalView, JSON_NUMERIC_CHECK );?>;

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