渲染 Highcharts 的问题 - 通过 PHP/MySQL 填充答案

【问题标题】：Issues Rendering Highcharts - Populating through PHP/MySQL渲染 Highcharts 的问题 - 通过 PHP/MySQL 填充
【发布时间】：2012-07-13 05:37:59
【问题描述】：

我希望有人可以在这里帮助我，我一直在看 highcharts 作为从我的 sql db 中绘制动态数据的一种方式....到目前为止我想出的是下面，这很奇怪，看起来是正确的，数据是正确的，但是，我无法让我的图表呈现，现在我尝试通过 Chrome 和 IE 查看图表但没有结果，任何人都可以看到我可能出错的地方，或者有错误的地方...我的数据正在传递到 JS 数组中，因此呈现端存在问题...任何帮助将不胜感激。我已经关闭了我的 html 标签，但由于某种原因它没有显示在这篇文章中......如果有人有任何建议，我很乐意听到他们的建议！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<script src='highcharts.js' type='text/javascript'> </script>       
    <script src='exporting.js' type='text/javascript'> </script>    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script>    

    </head>

<body>

    <?php
    include "connect_db.php";

    $SQL1 =     "SELECT review.reviewForum AS reviewForum, 
                COUNT(CASE WHEN mom.result = 'Approved' THEN 'yes' ELSE NULL END) AS Approved, 
                COUNT(CASE WHEN mom.result = 'NOT Approved' THEN 'yes' ELSE NULL END) AS Not_Approved, 
                COUNT(CASE WHEN mom.result = 'Cancelled' THEN 'yes' ELSE NULL END) AS Cancelled 
                FROM review INNER JOIN mom ON mom.reviewId = review.reviewId GROUP BY review.reviewForum";

    $result1 = mysql_query($SQL1);
    $data1 = array();
    while ($row = mysql_fetch_array($result1)) {
       $data1[] = $row['reviewForum'];
    }

    $result2 = mysql_query($SQL1);
    $data2 = array();
    while ($row = mysql_fetch_array($result2)) {
       $data2[] = $row['Approved'];
    }

    $result3 = mysql_query($SQL1);
    $data3 = array();
    while ($row = mysql_fetch_array($result3)) {
       $data3[] = $row['Not_Approved'];
    }

    $result4= mysql_query($SQL1);
    $data4 = array();
    while ($row = mysql_fetch_array($result4)) {
       $data4[] = $row['Cancelled'];
    }
    ?>

    <script type="text/javascript">
    $(document).ready(function() {
        var chart = new Highcharts.Chart({
              chart: {
                 renderTo: 'container',
                 type: 'column'
              },

            title:  {
                        text: 'TC REVIEW RESULT STATS'
                    },

            xAxis:  {
                        categories: [<?php echo join($data1, ',') ?>],
                    },

            yAxis:  {
                        min:0
                    },

            legend: {
                        layout: 'vertical',
                        backgroundColor: '#FFFFFF',
                        align: 'left',
                        verticalAlign: 'top',
                        x: 50,
                        y: 35,
                        floating: true,
                        shadow: true
                    },

            plotOptions: {
                            column: {
                                        pointPadding: 0.2,
                                        borderWidth: 0
                                    }
                        },

            series: [   {
                            name: 'Approved',
                            data: [<?php echo join($data2, ',') ?>],
                            pointStart: 0
                            //pointInterval
                        },

                        {

                            name: 'Unapproved',
                            data: [<?php echo join($data3, ',') ?>],
                            pointStart: 0
                            //pointInterval
                        },

                        {
                            name: 'Cancelled',
                            data: [<?php echo join($data4, ',') ?>],
                            pointStart: 0
                            //pointInterval
                        },
                    ]
        });
});
    </script>

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

</body>

【问题讨论】：

您的 html 标记可能丢失，因为您可能需要在该行之后添加一个额外的输入（让它成为代码的一部分）。

标签： php javascript mysql html highcharts

【解决方案1】：

我建议您开始尝试在不生成代码的情况下渲染一个。如果这不起作用，您可能想在 jsfiddle 上分享它，我们可以看看 :-)。如果确实有效，您应该将其与生成的代码进行比较。

    {
        name: 'Cancelled',
        data: [<?php echo join($data4, ',') ?>],
        pointStart: 0
        //pointInterval
    }, // This comma is a syntax error
]

你看到那个逗号了吗？不要在 '}' 之前加逗号，因为在多个地方都有逗号。

【讨论】：

老实说，EricG，我希望有人能以全新的眼光来查看我的代码，因为过去两天我一直在直视...我只是想知道如果我的布局还可以等等...可以在 php 文件中包含 js 吗？等
取消后的那个，数据还是右大括号？
对不起，我明白为什么了，我删除了它，但是当我上传它并重新运行它时，仍然没有渲染。我已经运行它，谷歌浏览器 - >开发者工具它告诉我我有一个错误@xAxis：{类别：[
由于某种原因我无法评论代码..抱歉回复混乱
没问题。你还有太多逗号。删除“}”之前的所有逗号

【解决方案2】：

去掉xAxis下categories语句后面的逗号。

 xAxis:  {
     categories: [<?php echo join($data1, ',') ?>],
 },

应该是

xAxis:  {
    categories: [<?php echo join($data1, ',') ?>]
},

【讨论】：

这里的逗号不是问题，jsFiddle 在对象数组后带有逗号
嗨...我也这样做了，但没有区别..谢谢你
试试：categories: ['']
谢谢..这有助于解决问题，我删除了 pointStart: 0 AND pointInterval，非常感谢

【解决方案3】：

我认为真正的原因在这里：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script>    
<script src='highcharts.js' type='text/javascript'> </script>       
<script src='exporting.js' type='text/javascript'> </script>

首先加载 jQuery，然后加载 Highcharts。

【讨论】：