无法为每个元素显示高图


Having trouble to show highchart for each element

我从数据库中获取了用户,他们都有评论分数。我使用 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>

您的帮助将不胜感激

你应该通过添加不同的ID和循环你的JavaScript代码,为许多用户创建许多highcahrt实例。

更改您的

<div id='Scores' ....

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

并切割您的

<脚本>

之后阻止和粘贴

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

和改变

renderTo: 'Scores',

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

问题是你的x变量是字符串,但应该是一个数组。因此,请考虑用php JSON(json_encode())打印,然后通过函数$.getJSON()在javascript中将其删除。