将PHP变量传递到Flot图表中

时间:2014-10-20 13:49:40

标签: javascript php jquery json flot

如何使用PHP变量显示Flot条形图上的值,而不是使用静态数据?我不确定PHP是否必须在JavaScript中,或者它应该如何格式化。

之后,我想在var data中回显我的变量。

例如,而不是说......

$london = mysqli_num_rows($londonc); 
$Newyourk = mysqli_num_rows($Newyourkc);
$Taipei = mysqli_num_rows($Taipei);
$NewDelhi= mysqli_num_rows($NewDelhi); 

var data = [   
    [0, 11], //London, UK
    [1, 15], //New York, USA
    [2, 25], //New Delhi, India
    [3, 24], //Taipei, Taiwan
    [4, 13], //Beijing, China
    [5, 18]  //Sydney, AU
];

...我想以这样的方式使用我的PHP变量:

var data = [    
    [0, <?php echo '['.($London).']'?>], //London
    [1, <?php echo '['.($NewYork).']'?>], //New York
    [2, <?php echo '['.($NewDelhi,).']'?>], //New Delhi,
    [3, <?php echo '['.($Taipei).']'?>], //Taipei
    [4, <?php echo '['.($Beijing).']'?>] //Beijing
];

2 个答案:

答案 0 :(得分:1)

在这种情况下,您可以使用json_encode()。无需手工操作:

<?php

$London = 11;
$NewYork = 15;
$NewDelhi = 25;
$Taipei = 24;
$Beijing = 13;
$Sydnew = 18;

$values = array(
    array(0, $London),
    array(1, $NewYork),
    array(2, $NewDelhi),
    array(3, $Taipei),
    array(4, $Beijing),
    array(5, $Sydnew),
);

$data = json_encode($values);
echo $data; // [[0,11],[1,15],[2,25],[3,24],[4,13],[5,18]]

?>
<script type="text/javascript">
var data = <?php echo $data; ?>;
console.log(data);
</script>

Sample Output

答案 1 :(得分:0)

试试这个,我已经测试了这段代码并且工作正常

<link href="../examples.css" rel="stylesheet" type="text/css">  
        <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
        <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
        <script type="text/javascript">
        <?php       
            $London = 3; 
            $NewYork = 8;
            $NewDelhi = 5; 
            $Taipei = 13;          
        ?>
        $(function() {
            var d2 = [[0, <?php echo $London; ?>], [4, <?php echo $NewDelhi; ?>], [8, <?php echo $NewYork; ?>], [9, <?php echo $Taipei; ?>]];
            $.plot("#placeholder", [ d2]);
        });
        </script>
    </head>
    <body>
        <div class="demo-container" id="placeholder">           
        </div>
    </body>
    </html>