logo标签列表

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

javascriptphphtmlgoogle-visualization
3
我有以下一段代码，用于绘制图表，并使用google.visualisation根据我在PHP部分中存储在3个数组中的SQL表格值进行循环（即$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>

有没有人能为我指明正确的方向？

一个提示是使用console.log(array1)查看它的样子，也许它并没有被array1[0]访问到。 - Björn
@Bear，我已经检查过了，一切正常。数组中存储的值是正确的。但是我解决了！ - Abhijith Bagepalli
2个回答
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将元素存储为数组中的字符串(如您可以从我的源代码这里看到的)。

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

  • 在json_encode函数中添加标志JSON_NUMERIC_CHECK。所以在我的情况下，它将是：var array1 = <?php echo json_encode($TotalView,JSON_NUMERIC_CHECK);?>。但是根据某些评论，这在certain情况下不可靠。
  • 另一个解决方案是在从数据库读取数据库元素时在PHP部分进行修复。$TotalView[$x]=(int)$row['Total View Count']。因此，这将数据库元素Total View Count存储为整数在TotalView数组中。
数组长什么样？请阅读这个。 - Sᴀᴍ Onᴇᴌᴀ
@SamOnela，它们是一组数字（例如array1[]={22,17,35,11}）。 - Abhijith Bagepalli
1
根据您的评论和更新的PHP代码，似乎您从数据库查询返回的数据中有以字符串形式呈现的数字。在使用eval()或Javascript Number对象之前，如果您查看浏览器控制台，则可能会看到类似以下错误的错误信息：
Uncaught Error: Type mismatch. Value 12 does not match type number in column index 1
有多种选项可以解决此问题（无需使用eval()）：

  • Type cast the values as an integer or float when adding to the output arrays in PHP

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

  • use the JSON_NUMERIC_CHECK flag with json_encode (see this answer for more info).

    var array1 = <?php echo json_encode($TotalView, JSON_NUMERIC_CHECK );?>;

    But beware there are drawbacks to using that constant (see this article for an example).

请查看这个更新的phpfiddle。如您所见，我创建了一个类来模拟数据库查询（因为在该沙盒中我没有数据库连接），但允许拥有相同的数组创建。
请运行该fiddle，并在浏览器控制台中检查输出。请注意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">）被视为流内容，添加到head标签中。head标签仅允许元数据内容。将该无序列表标签移动到body标签中。
请参见下面代码段中演示的输出。 

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>

感谢您抽出时间来帮忙，但请原谅我的无知，因为我仍然不明白我做错了什么！我相当确定我所拥有的SQL语句是正确的，除此之外，我的数组创建和JavaScript语句似乎也与您使用的相同，但如果没有eval函数，它仍然无法显示图形。 - Abhijith Bagepalli
我想查看PHP生成的完整HTML/JS输出... 如果您在互联网上没有公共URL，您能否将其复制并粘贴到像pastebin.com这样的地方？ - Sᴀᴍ Onᴇᴌᴀ
你是指array1、array2和array3的值吗？ - Abhijith Bagepalli
我看到array1、array2和array3中的元素被存储为字符串，我猜这就是问题所在。但在SQL表中，这些元素的类型是int。 - Abhijith Bagepalli
我在这里找到了一个解决方案（https://dev59.com/WHM_5IYBdhLWcg3waSX9）。现在它可以正常工作了。我没有足够的声望来点赞你的回答，但非常感谢！！ - Abhijith Bagepalli
显示剩余3条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接