Highcharts和PHP

我試圖從數據庫提取數據到Highcharts極座標圖，當我嘗試加載它在瀏覽器中我得到這個錯誤在瀏覽器的檢查工具：Highcharts和PHP

SyntaxError: missing } after property list on Line 78

這是我用過的代碼。

編輯：IVE PUT不同的代碼第一次

<?php 
$connection = mysqli_connect("localhost","root","","uwguru"); 
?> 
<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Highcharts Example</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <style type="text/css"> 
     ${demo.css} 
    </style> 
    <script type="text/javascript"> 
     $(function() { 

      $('#container').highcharts({ 

       chart: { 
        polar: true, 
        type: 'line' 
       }, 

       title: { 
        text: 'Muscle Summary', 
        x: -80 
       }, 

       pane: { 
        size: '80%' 
       }, 

       xAxis: { 
        categories: [ 
         <?php 
         $sql="SELECT * FROM exercises"; 
         $result= mysqli_query($connection,$sql); 
         while ($registros = mysqli_fetch_array($result)) 
         { 
         ?> 
          <?php echo $registros['main_muscle']?>, 

         <?php 
         } 
         ?> 
        ], 
        tickmarkPlacement: 'on', 
        lineWidth: 0 
       }, 

       yAxis: { 
        gridLineInterpolation: 'polygon', 
        lineWidth: 0, 
        min: 0 
       }, 

       tooltip: { 
        shared: true, 
        pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>' 
       }, 

       legend: { 
        align: 'right', 
        verticalAlign: 'top', 
        y: 70, 
        layout: 'vertical' 
       }, 

       series: [{ 
        name: 'Test', 
        data: [ 
         <?php 
         $sql="SELECT * FROM exercises"; 
         $result= mysqli_query($connection,$sql); 
         while ($registros = mysqli_fetch_array($result)) 
         { 
         ?> 
         <?php echo $registros['muscle_string']?>, 

         <?php 
         } 
         ?> 

        ] 
        pointPlacement: 'on'}], 


      }); 
     }); 
    </script> 
</head> 
<body> 
<script src="js/highcharts.js"></script> 
<script src="js/highcharts-more.js"></script> 
<script src="js/modules/exporting.js"></script> 

<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div> 

</body> 
</html>

提煉源代碼

< 

!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Highcharts Example</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <style type="text/css"> 
     ${demo.css} 
    </style> 
    <script type="text/javascript"> 
     $(function() { 

      $('#container').highcharts({ 

       chart: { 
        polar: true, 
        type: 'line' 
       }, 

       title: { 
        text: 'Muscle Summary', 
        x: -80 
       }, 

       pane: { 
        size: '80%' 
       }, 

       xAxis: { 
        categories: [ 
         ["1","14","13","1","14","1","7","9","16"] 
              ], 
        tickmarkPlacement: 'on', 
        lineWidth: 0 
       }, 

       yAxis: { 
        gridLineInterpolation: 'polygon', 
        lineWidth: 0, 
        min: 0 
       }, 

       tooltip: { 
        shared: true, 
        pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>' 
       }, 

       legend: { 
        align: 'right', 
        verticalAlign: 'top', 
        y: 70, 
        layout: 'vertical' 
       }, 

       series: [{ 
        name: 'Test', 
        data: [ 
         ["6","745","7547","4","5","1","2","634234","325235"] 

        ] 
        pointPlacement: 'on'} 


      }); 
     }); 
    </script> 
</head> 
<body> 
<script src="js/highcharts.js"></script> 
<script src="js/highcharts-more.js"></script> 
<script src="js/modules/exporting.js"></script> 

<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div> 

</body> 
</html>

來源

2016-07-07 racan01

什麼是線78？ –

pointPlacement：'on'}]， – racan01

正如你所看到的，你缺少'series：[]'對象的右方括號。您的'series.data'值也是全部字符串（「6」，「745」等）。 Highcharts要求數據值是數字而不是字符串。看看做數字值的json編碼。 – wergeld

檢查while環路的輸出。

此外，請考慮使用json_encode()構建陣列並將其輸出到JSON。

請注意，您仍然必須解析JavaScript端的JSON。如果你打算混合使用javascript和PHP，通常更好的做法是單獨輸出JS數據（比如作爲JS邏輯上面的變量），然後在需要的地方解析它。這使得將來維護代碼變得更加容易。

<?php 
    // put this in above the `$('#container').highcharts({` line 
    //and you can access it as a proper JS variable as you need to. 
    $sql="SELECT * FROM exercises"; 
    $result= mysqli_query($connection,$sql); 
    $output = [];  
    while ($registros = mysqli_fetch_array($result)) { 
     $output[] = $registros['muscle_string']; 
    } 
    echo "var muscleString = JSON.parse('".json_encode($output)."');"; 
?>

也就是說，你所得到的錯誤是，你可能需要這樣：

series: [{ 
    name: 'Test', 
    data: [ 
     ["6","745","7547","4","5","1","2","634234","325235"] 
    ] 
    pointPlacement: 'on'}

，最終是這樣的：

series: [{ 
    name: 'Test', 
    data: [ 
     ["6","745","7547","4","5","1","2","634234","325235"] 
    ], // <-- add comma here 
    pointPlacement: 'on' 
}] // <-- close your array with a closing square bracket

來源

2016-07-07 18:37:07 Sarcastron

該代碼does not幫助：/ – racan01

我更新了答案。如果您嘗試過並且無法使用，請發佈呈現的HTML源代碼，以便社區能夠更好地爲您提供幫助。現在我們正試圖幫助我們看不到的語法錯誤。你的while循環中的東西很可能不是呈現有效的JS代碼。當括號是問題時，口譯員很少在正確的行號上報告錯誤。 – Sarcastron

我已添加代碼，非常感謝您幫助我解決此問題 – racan01

回答

相關問題