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

Highcharts和PHP

回答

相关问题