javascript - Highcharts 和 PHP

标签 javascript php sql highcharts

我试图将数据从数据库提取到 Highcharts 极坐标图,当我尝试将其加载到浏览器上时,我在浏览器的检查器工具中收到此错误:

SyntaxError: missing } after property list on Line 78

这是我使用过的代码。

编辑:IVE 第一次输入不同的代码

    <?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>

最佳答案

检查 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

关于javascript - Highcharts 和 PHP,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38252777/

相关文章:

javascript - 如何在 sequelize 中编写查询以查找与 user_id 关联的所有待办事项

javascript - 在 Javascript fetch() 中,为什么在我们获取实际数据之前有两个 Promise 被解析?

javascript - 从 json 文件加载数据

javascript - Ember - 自动重定向到 firstObject

php - SQL 语法错误 - ' ' ', '', now())'

php - 如何在没有额外空格的情况下从 MySQL 检索字符数据?

javascript - 选择特定表格行时禁用按钮

c# - 从C#调用Azure SQL存储过程非常慢

c# - linq to sql使用lambda连接多列

sql - SQL Server 中的 LIKE 运算符未按预期工作