Используйте переменную php в круговой диаграмме Google

Я хочу использовать свою переменную PHP в диаграмме Google, но диаграмма не может прочитать мой тег 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>
Источник

3 ответа

Решение

Рабочий пример.

<?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>
Источник

Согласно документации, для круговых диаграмм визуализации Google должен быть один тип данных 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; ?>')
    };

Вы также можете использовать JavaScript parseFloat() вместо parseInt() если ваши значения суммы, содержащие десятичные значения.

Источник 
<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>
Источник

Вы можете использовать скрипты в PHP.

Но вы не можете использовать PHP в скриптах.

Это не сработает.

Источник
Другие вопросы по тегам