Question

我从数据库中获取了用户，并且所有用户都有评分。我使用while语句来显示每个用户和评论分数（使用highchart）。

问题在于我只获得了一个图表，而不是为每个用户获得一个图表。

这是代码

PHP：

if (isset($_COOKIE['rev_idx'])) {
    $review_id=preg_replace('#[^0-9]#','',$_COOKIE['rev_idx']);
    if ($review_id==$get_rev) {
        $sql1="SELECT * FROM `user`.`review` WHERE reviewer_id='$review_id'";
        $query1=mysqli_query($connect_dude,$sql1);
        if (mysqli_num_rows($query1)>0) {
            $show_review="";

            while($row1=mysqli_fetch_assoc($query1)){
                $rid=$row1['rid'];
                $reviewer_id=$row1['reviewer_id'];
                $reviewee_id=$row1['reviewee_id'];
                $review_tit=$row1['review_tit'];
                $review=$row1['review'];
                $image=$row1['image'];
                $point=$row1['points'];
                $rev_date=$row1['rev_date'];

                $sql2="SELECT * FROM `user`.`user_det` WHERE id='$reviewee_id'";
                $query2=mysqli_query($connect_dude,$sql2);
                if(mysqli_num_rows($query2)>0){
                    $row2=mysqli_fetch_assoc($query2);
                    $image=$row2['img'];
                    $busi_title=$row2['busi_title'];

                    $show_review.="<br><div id='indi_rev'><div style='width:600px;border-bottom:1px solid black;'></div><div id='rev_dat'>".$rev_date."</div>
                          <div style='width:600px;border-bottom:1px solid black;'></div>
                          <div style='float:left;'><a href='../".$reviewee_id."/index.php'><img src='../account/".$reviewee_id."/".$image."' width='130' height='150'></a><br><a href='../".$reviewee_id."/index.php'><b>".$busi_title."</b></a></div>

                          <div><br><b>".$review_tit."</b><br>".$review."</div><div id='Scores' style='min-width: 100px; height: 80px;max-width: 500px;'></div></div>";

                }                                 
            }
        } else {
            $show_review="<b>You have not written any review yet.</b><br>Share your thought to others by writing review.";
        }
    } else {
      header("location:reviewer.php?usr=".$review_id."");
    }
}

使用Javascript：

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        var x="<?php echo $point;?>";
        var chart = new Highcharts.Chart({
            chart: {
                type: 'bar',
                renderTo: 'Scores',
                marginRight: 50,
                events: {
                    //load: loadRed   
                }
            },
            title: {
                text: '',
                style: {
                    color: 'black',
                    fontWeight: '700',
                    fontFamily: 'Arial',
                    fontSize: 20
                }
            },
            xAxis: {
                categories: ['Review Score'],
                title: {
                    text: null
                },
                gridLineWidth: 0,
                minorGridLineWidth: 0,
                labels: {
                    style: {
                        color: 'black',
                        fontWeight: '700',
                        fontFamily: 'Arial',
                        fontSize: 11,
                        width: 90
                    }
                }
            },
            yAxis: {
                min: 0,
                max: 100,
                gridLineWidth: 0,
                minorGridLineWidth: 0,
                labels: {
                    enabled: false
                },
                title: {
                    text: null
                }
            },

            tooltip: {
                valueSuffix: ' /100'
            },

            plotOptions: {
                series: {
                    stacking: 'percent'
                },
                bar: {
                    grouping: false,
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            legend: {
                enabled: false,
                align: 'right',
                x: -40,
                y: 100,
                floating: false,
                borderWidth: 0,
                backgroundColor: '#FFFFFF',
                shadow: false
            },
            credits: {
                enabled: false
            },
            series: [
                {
                    name: 'null',
                    data: [x],
                    borderWidth: 0,
                    color: "rgba(0,0,0,0)"
                }, {
                    name: 'Score',
                    data: [x],
                    borderWidth: 0,
                    stack: 1,
                    animation: false,
                    color: "gray"
                }, {
                    name: 'Score',
                    data: [x],
                    color: "green",
                    borderWidth: 0,
                    borderRadius: 5
                }
            ]
        });
    });
</script>

非常感谢您的帮助

Answer 1

你应该为许多用户创建许多highcahrt实例，方法是添加不同的id并循环你的javascript代码。

改变你的

<div id='Scores' ....

到

<div id='Scores_".$reviewee_id."' ....

并切断你的

＆LT;脚本＆gt;

阻止并粘贴

$show_review.="<br><div ......

并更改

renderTo: 'Scores',

到

renderTo: 'Scores_<?php echo $reviewee_id>',

Answer 2

问题是你的x变量是字符串，但应该是一个数组。所以考虑在php JSON（json_encode（））中打印，然后通过函数$ .getJSON（）在javascript中使用它。

难以显示每个元素的高图

2 个答案: