php+mysql+js编写的统计系统

Ken1Ve · 2022年11月4日

源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bbs统计系统</title>
<!--数据库-->
<?php
$servername = "localhost";
$username = "root";
$password = "123456";
$dbname = "tj";
 
// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("连接失败: " . mysqli_connect_error());
}
 
$sql = "SELECT * FROM sj";
$result = mysqli_query($conn, $sql);
$result = mysqli_query($conn, $sql);
 
if (mysqli_num_rows($result) > 0) {
    // 输出数据
    while($row = mysqli_fetch_assoc($result)) {
        
        $a1=$row["renshu1"];
        $b1=$row["wenzhang1"];
        $c1=$row["fangke1"];
        $a2=$row["renshu2"];
        $b2=$row["wenzhang2"];
        $c2=$row["fangke2"];
        $a3=$row["renshu3"];
        $b3=$row["wenzhang3"];
        $c3=$row["fangke3"];
        $a4=$row["renshu4"];
        $b4=$row["wenzhang4"];
        $c4=$row["fangke4"];
        
    }
} else {
    echo "0 结果";
}
    mysqli_close($conn);
?>
<!--数据库end-->

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>

<script type="text/javascript">
var rs1=<?php echo $a1 ?>;
var wz1=<?php echo $b1 ?>;
var fk1=<?php echo $c1 ?>;
var rs2=<?php echo $a2 ?>;
var wz2=<?php echo $b2 ?>;
var fk2=<?php echo $c2 ?>;
var rs3=<?php echo $a3 ?>;
var wz3=<?php echo $b3 ?>;
var fk3=<?php echo $c3 ?>;
var rs4=<?php echo $a4 ?>;
var wz4=<?php echo $b4 ?>;
var fk4=<?php echo $c4 ?>;
var zong1=(rs1+rs2+rs3+rs4)/4
var zong2=(wz1+wz2+wz3+wz4)/4
var zong3=(fk1+fk2+fk3+fk4)/4
     $(function () {                                                               
    $('#container').highcharts({                                          
        chart: {                                                          
        },                                                                
        title: {                                                          
            text: '折线，饼状，条状综合图'                                     
        },  
        //x轴
        xAxis: {                                                          
            categories: ['前天', '昨天', '今天', '预计明日', '平均数']
        },                                                                
        tooltip: {                                                        
            formatter: function() {                                       
                var s;                                                    
                if (this.point.name) { // the pie chart                   
                    s = ''+                                               
                        this.point.name +': '+ this.y +' fruits';         
                } else {                                                  
                    s = ''+                                               
                        this.x  +': '+ this.y;                            
                }                                                         
                return s;                                                 
            }                                                             
        },                                                                
        labels: {                                                         
            items: [{                                                     
                html: 'Total fruit consumption',                          
                style: {                                                  
                    left: '40px',                                         
                    top: '8px',                                           
                    color: 'black'                                        
                }                                                         
            }]                                                            
        },                                                                
        series: [{                                                        
            type: 'column',                                               
            name: '人数',                                                 
            data: [rs1, rs2, rs3, rs4, zong1]                                         
        }, {                                                              
            type: 'column',                                               
            name: '文章数',                                                 
            data: [wz1, wz2, wz3, wz4, zong2]                                         
        }, {                                                              
            type: 'column',                                               
            name: '访客',                                                  
            data: [fk1, fk2, fk3, fk4, zong3]                                         
        }, {                                                              
            type: 'spline',                                               
            name: 'Average',                                              
            data: [3, 2.67, 3, 6.33, 3.33],                               
            marker: {                                                     
                lineWidth: 2,                                               
                lineColor: Highcharts.getOptions().colors[3],               
                fillColor: 'white'                                          
            }                                                             
        }, {                                                              
            type: 'pie',                                                  
            name: 'Total consumption',                                    
            data: [{                                                      
                name: 'Jane',                                             
                y: 13,                                                    
                color: Highcharts.getOptions().colors[0] // Jane's color  
            }, {                                                          
                name: 'John',                                             
                y: 23,                                                    
                color: Highcharts.getOptions().colors[1] // John's color  
            }, {                                                          
                name: 'Joe',                                              
                y: 19,                                                    
                color: Highcharts.getOptions().colors[2] // Joe's color   
            }],                                                           
            center: [100, 80],                                            
            size: 100,                                                    
            showInLegend: false,                                          
            dataLabels: {                                                 
                enabled: false                                            
            }                                                             
        }]                                                                
    });                                                                   
});                                                                                                                
</script>

</head>
<body>
<div id="container" style="width:850px;height:500px;margin:0 auto"></div>

</body>
</html>

效果图

附件下载

统计图.zip

版权属于：逍遥子大表哥

本文链接：https://blog.bbskali.cn/283.html

按照知识共享署名-非商业性使用 4.0 国际协议进行许可，转载引用文章应遵循相同协议。

登录

游客您好，欢迎来到黑客世界论坛！您可以在这里进行注册。

php+mysql+js编写的统计系统

推荐的帖子

Ken1Ve

源码

效果图

附件下载

链接帖子

意见的链接

分享到其他网站

黑客攻防讨论组

黑客攻防讨论组

最近浏览 0位会员

黑客世界站内导航 (SITE MAP)