Highcharts 和 PHP [重复]答案

【问题标题】：Highcharts and PHP [duplicate]Highcharts 和 PHP [重复]
【发布时间】：2016-07-07 18:26:06
【问题描述】：

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

SyntaxError: missing } after property list on Line 78

这是我使用的代码。

编辑：我第一次输入不同的代码

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

【问题讨论】：

pointPlacement: 'on'}],
如您所见，series:[] 对象上缺少右方括号。您的series.data 值也都是字符串（“6”、“745”等）。 Highcharts 要求数据值是数字而不是字符串。看看做数值的json编码。
@wegeld 他们不再是字符串了

标签： javascript php sql highcharts

【解决方案1】：

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

【讨论】：

该代码没有帮助：/
我更新了答案。如果您尝试一下，但它不起作用，请发布呈现的 HTML 源代码，以便社区可以更好地为您提供帮助。现在，我们正在尝试帮助解决我们看不到的语法错误。您的 while 循环中的某些内容很可能未呈现有效的 JS 代码。当右括号是问题时，解释器很少报告正确的行号错误。
我已经添加了代码，谢谢你帮助我
希望我的编辑对您有所帮助。
语法错误：预期的表达式，得到关键字'var'