如何將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中的列表元素

回答

相關問題