难以显示每个元素的图表

Question

I got fetched user from database, and all of them have review score. I use while statement to show each user and the review score (using highchart ).

The problem is that I'm getting only one chart, instead of getting one for each single user.

Here is the code

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>

Your help would be greatly appreciated

Answer 1

you should make many instance of highcahrt for many users by adding different id and loop your javascript code too.

change your

<div id='Scores' ....

to

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

and cut your

< script >

block and paste after

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

and change

renderTo: 'Scores',

to

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

Answer 2

The problem is that your x variable is string, but should be an array. So consider to print in php JSON (json_encode()) and then loat this in the javascript by the function $.getJSON().