php+mysql+js网站统计系统

admin · 发表于 2018-6-25 20:22:57

一：前言

闲来无事，想搞个统计系统，有条形图，有折线图，有饼形图，总之能高大上的装逼就可以了。ok开始搞吧！

二：代码

[pre]
<!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);
?>


<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">
/*php变量赋值为js变量*/
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>
[/pre]

php+mysql+js网站统计系统

本帖子中包含更多资源

热心会员

推广达人

宣传达人

突出贡献

优秀版主

荣誉管理

论坛元老