Fatal编程技术网
  • javascript/
  • Javascript 在谷歌饼图中使用php变量

Javascript 在谷歌饼图中使用php变量

javascript php

Javascript 在谷歌饼图中使用php变量,javascript,php,google-pie-chart,Javascript,Php,Google Pie Chart,我想在Google图表中使用我的PHP变量，但图表无法读取我的PHP标记。正如您可以看到下面的代码一样，我将我的PHP变量放在脚本中。（我在代码顶部定义的PHP变量，结果是正确的）。我的代码怎么了？有什么解决办法吗？如果需要，一定要问我更多的信息。多谢各位 <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnL

我想在Google图表中使用我的PHP变量，但图表无法读取我的PHP标记。正如您可以看到下面的代码一样，我将我的PHP变量放在脚本中。（我在代码顶部定义的PHP变量，结果是正确的）。我的代码怎么了？有什么解决办法吗？如果需要，一定要问我更多的信息。多谢各位

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Order', 'Amount'],
      ['Completed',     '<?php echo$completed ?>'],
      ['New',      '<?php echo$new ?>']
    ]); 

    var options = {
      title: 'Total Order ' + <?php echo$total; ?>
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
</script>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[‘订单’、‘金额’]，
[“已完成”，“已完成]，
['新'，'']
]); 
变量选项={
标题：“总订单”+
};
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}
根据，对于谷歌可视化饼图，必须有一个数据类型
string
列和一个
number
列

因此，在呈现数据之前，应该将
Amount
列解析为
integer
或
float
。您可以使用php本身或javascript来实现

   var data = google.visualization.arrayToDataTable([
      ['Order', 'Amount'],
      ['Completed', parseInt('<?php echo $completed; ?>')],
      ['New',       parseInt('<?php echo $new; ?>')]
    ]); 

    var options = {
      title: 'Total Order ' +  parseInt('<?php echo $total; ?>')
    };

var data=google.visualization.arrayToDataTable([
[‘订单’、‘金额’]，
['Completed'，parseInt（''）]，
['New'，parseInt（''）]
]); 
变量选项={
标题：“总订单”+parseInt（“”）
};
如果金额值包含十进制值，也可以使用javascript
parseFloat（）
而不是
parseInt（）
。

工作示例

<?php 
$completed = 50;
$new = 10;
$total = 30;
?>
<html>
    <head>
        <!--Load the AJAX API-->
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">


            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {

                var data = google.visualization.arrayToDataTable([
                    ['Order', 'Amount'],
                        ['Completed', parseInt('<?php echo $completed; ?>')],
                        ['New',       parseInt('<?php echo $new; ?>')]
                ]); 

                var options = {
                    title: 'Total Order ' + <?php echo$total; ?>
                };

                    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

                    chart.draw(data, options);
                }

        </script>
    </head>

    <body>
        <div id="piechart"></div>
    </body>
</html>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[‘订单’、‘金额’]，
['Completed'，parseInt（''）]，
['New'，parseInt（''）]
]); 
变量选项={
标题：“总订单”+
};
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}
您可以在PHP中使用脚本

但是，您不能在脚本中使用PHP

它不起作用。



<span id="json-genderby"><?php echo json_encode($arrayGenderGroupBy); ?></span>

<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>

<script type="text/javascript">

    $(window).on('load', function() {
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var json_gender = $("#json-genderby").text()
            
            var arrayGenderBy = [];
            var count = 0;

            $.each(JSON.parse(json_gender), function(i, item) {
                if (count == 0)
                    arrayGenderBy[count] = [item[0], item[1]];
                else 
                    arrayGenderBy[count] = [ item[0], parseInt(item[1]) ];
                count ++
            });
            

            var data    = google.visualization.arrayToDataTable(arrayGenderBy);

            var options = { title: 'Servey Questions Answered by Gender' };
            var chart   = new google.visualization.PieChart(document.getElementById('piechart'));

            chart.draw(data, options);
        }
    });
</script>


$（窗口）.on（'load'，function（）{
load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var json_gender=$（“#json genderby”）.text（）
var arrayGenderBy=[]；
var计数=0；
$.each（JSON.parse（JSON_性别），函数（i，项）{
如果（计数=0）
arrayGenderBy[count]=[item[0]，item[1]]；
其他的
arrayGenderBy[count]=[item[0]，parseInt（item[1]）；
计数++
});
var data=google.visualization.arrayToDataTable（arrayGenderBy）；
var options={title:'性别回答的问题'}；
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}
});
呈现的代码是什么？控制台中有错误吗？没有，因为图表没有显示。但是如果我将脚本中的php变量更改为整数，那么Google图表就可以完美地工作@chris85不是图表，而是源代码。这一页是空白的吗？我也在echo和variable之间加了空格，但这会破坏它。只有图表的div是空的，页面中的其他元素都可以@CHRIS85生成的JS是否为空？