Question

我希望有人可以在这里帮助我，我一直在寻找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>

Answer 1

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

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

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

Answer 2

在xAxis下的categories语句后取出逗号。

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

应该是

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

Answer 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。

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

3 个答案: