如何将php变量作为javascript中的列表元素

我正在研究一个将显示条形图的项目。条形图工作正常，但是当我尝试将一个整数php变量传递给javascript变量并添加变量作为列表元素不起作用时。下面是我的代码。我不知道我的源代码有什么问题。我花了几个小时在网上寻找解决方案，但我没有得到任何答案。如何将php变量作为javascript中的列表元素

期待看到您的回复。

<html> 
<head><title></title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <style type="text/css"> 

#container { 
height: 400px; 
min-width: 310px; 
max-width: 800px; 
margin: 0 auto; 
} 
    </style> 

<?php 

//my php variable 
$ab=6; 

?> 
<script type="text/javascript"> 

//assign the php variable to javascript variable 
var za = <?php echo $ab; ?>; 


$(function() { 
$('#container').highcharts({ 
chart: { 
type: 'column', 
options3d: { 
enabled: true, 
alpha: 10, 
beta: 25, 
depth: 70 
     } 
    }, 
    title: { 
     text: '3D chart with null values' 
    }, 
    subtitle: { 
     text: 'Notice the difference between a 0 value and a null point' 
    }, 
    plotOptions: { 
     column: { 
      depth: 25 
     } 
    }, 
    xAxis: { 
     categories: Highcharts.getOptions().lang.shortMonths 
    }, 
    yAxis: { 
     title: { 
      text: null 
     } 
    }, 
    series: [{ 
     name: 'Sales', 
     // I'm putting the variable as an element below, but it's not working 
     data: [za, 3, null, 4, 0, 5, 1, 4, 6, 3] 
    }] 
    }); 
    }); 
    </script> 
    </head> 
    <body> 

    <script src="https://code.highcharts.com/highcharts.js"></script> 
    <script src="https://code.highcharts.com/highcharts-3d.js"></script> 
    <script src="https://code.highcharts.com/modules/exporting.js"></script> 

    <div id="container" style="height: 400px"></div> 
    </body>

来源

2016-05-16 dyahmed

看起来它应该工作得很好。你有没有检查PHP的*输出*是什么？ – Quentin

假设文件保存为php并执行为php它应该工作。如果你只是将它保存为.html然后不是 – mplungjan

如果我在浏览器中访问页面时只是看到空白页面（即没有任何内容的页面），但是如果用数字条形图替换数据列表中的'za'变量显示在页面 – dyahmed

对于什么是值得的，您应该避免以这种方式与javascript交互。 PHP更好地工作，当你使用HTML的互动，让JavaScript的是单独的（这正好一半对使用真正的模板系统，你应该做的）：

<?php 
// page setup goes up here: 
$ab = 6; // name your variables at little more descriptively, I don't know what this does 
?> 
<head> 
    <title></title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <style type="text/css"> 
     #container { height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto; } 
    </style> 

    <script type="text/javascript"> 
     $(function() { 
      console.log($('#ab-variable').val()); 
      $('#container').highcharts({ 
       chart: { 
        type: 'column', 
        options3d: { 
         enabled: true, 
         alpha: 10, 
         beta: 25, 
         depth: 70 
        } 
       }, 
       title: { 
        text: '3D chart with null values' 
       }, 
       subtitle: { 
        text: 'Notice the difference between a 0 value and a null point' 
       }, 
       plotOptions: { 
        column: { 
         depth: 25 
        } 
       }, 
       xAxis: { 
        categories: Highcharts.getOptions().lang.shortMonths 
       }, 
       yAxis: { 
        title: { 
         text: null 
        } 
       }, 
       series: [{ 
        name: 'Sales', 
        // We're referencing our hidden field in the HTML 
        data: [$('#ab-variable').val(), 3, null, 4, 0, 5, 1, 4, 6, 3] 
       }] 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <script src="https://code.highcharts.com/highcharts.js"></script> 
    <script src="https://code.highcharts.com/highcharts-3d.js"></script> 
    <script src="https://code.highcharts.com/modules/exporting.js"></script> 

    <!-- we're including our variable here, in HTML, rather than in the javascript --> 
    <input type="hidden" id="ab-variable" value="<?= $ab; ?>"> 

    <div id="container" style="height: 400px"></div> 
</body>

...那么你可以看看INT的HTML并看到您的隐藏字段具有正确的值。如果它仍然无法正常工作，那么您的使用highcharts的JavaScript设置存在问题。

如果以这种方式编写代码，您将获得额外的好处，即可以创建一个单独的JavaScript文件，并将其缓存到客户端，而且不必每次都下载它。

因为它看起来好像没有任何固有的问题与您的代码，但重新分解（当它的保证）有时可以排除小错误。要确认此代码应该按照您的方式工作，我添加了一个console.log()调用，以确保您的JavaScript可以看到您的变量。要查看更多内容，您必须提供指向您网页的链接，以便我们可以看到可能弹出的任何错误。

来源

2016-05-16 16:08:29 Jason

谢谢。它的工作原理 – dyahmed

太棒了！如果它解决了你的问题，考虑接受答案，以便其他人明白你的帮助。 – Jason

如何将php变量作为javascript中的列表元素

回答

相关问题