Can't get PHP variables in the JS script when

2019-09-30 03:25发布

问题:

Below is an extract of my php file (recherche.php) which contains Html and Javascript (JQuery Highcharts) codes and run a MySQL query.

But, I can't access the PHP variables when setting the JQuery code in the head tag.

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title></title>

    <link href="../css/bootstrap.css" type="text/css" rel="stylesheet" />
    <link href="../css/style.css" type="text/css" rel="stylesheet" />

    <script src="./graphics/js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="./graphics/js/highcharts.js" type="text/javascript"></script>

    <script type="text/javascript">

        var cat = '<?php echo $categorys; ?>' ; 
        var data1 = '<?php echo $datas; ?>' ;
        var data2 = '<?php echo $datas2; ?>' ;
        var data3 = '<?php echo $datas3; ?>' ;

        var chart;
        $(document).ready(function() { 

            chart1 = new Highcharts.Chart({

                chart: {
                    renderTo: 'containerxx',  
                    type: 'bar'
                    },

                title: {
                    text: 'Average salaries of the sector'
                    },

                xAxis: {
                    categories:  ['Women', 'Men']
                    },

                yAxis: {
                    title: {
                        text: 'Salary'
                        }
                    },

                series: [{
                            name: 'average salary',
                            data: document.write(data1);
                        },  
                        {   
                            name: 'max salary',
                            data: document.write(data2);
                        },
                        {   
                            name: 'min salary',
                            data: document.write(data3); 
                        }]

            });

        });

    </script>

...and below, still in the same file and in the body tag, after some more code, are the php variables allocations:

    ...
    while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {

    $category[] = $row[$categorie];

    $data[] = (INT)$row['Salaire_moyen'];

    $data2[] = (INT)$row['Salaire_Max'];

    $data3[] = (INT)$row['Salaire_Min'];
    }
$categorys = json_encode($category); 
echo $categorys ;
echo "<br/><br/>";
$datas = json_encode($data); 
echo $datas ;
echo "<br/><br/>";
$datas2 = json_encode($data2); 
echo $datas2;
echo "<br/><br/>";
$datas3 = json_encode($data3); 
echo $datas3 ;
echo "<br/><br/>";
    ....

and this is the command to launch the highchart graphics :

    <div id="containerxx" style="width:100%; height:400px; margin:0 auto"></div>

But sadly, no chart is diplayed on the screen.

But when I do the same with static values in the same php file it works and I can get the highchart graphic in my webpage.

For example, when I write this script below instead of the one above in the same file, it works and the graphic is diplayed on my page:

    <script type="text/javascript">
        var chart;
        $(document).ready(function() { 


            chart1 = new Highcharts.Chart({

                chart: {
                    renderTo: 'containerxx',  

                    type: 'bar'
                    },

                title: {
                    text: 'Salaire moyen des métiers de l\'informatique'
                    },

                xAxis: {
                    categories:  ['Architecte logiciel', 'Développeur logiciel', 'Infogérance']
                    },

                yAxis: {
                    title: {
                        text: 'Salaire moyen'
                        }
                    },


                series: [{
                            name: 'Femmes',
                            data: [60000, 45000, 25000]
                        },  
                        {   
                            name: 'Hommes',
                            data: [75000, 48000, 27500]
                        }]

            });


        });

    </script>

What do I miss to make my graphic dynamic working with PHP variables despite statics ones?

回答1:

You have to initialize your variables BEFORE echoing them in your JavaScript function. So place the PHP that loads these variables above your <script>



回答2:

series: [{
          name: 'average salary',
          data: document.write(data1)
         },  
         {   
          name: 'max salary',
          data: document.write(data2)
         },
         {   
          name: 'min salary',
          data: document.write(data3)
         }]

extra semicolon after document.write(data1/2/3/...)