您的位置：首页 > 编程语言 > PHP开发

如何用PHP通过拼接数据到显示在数据库图表上

2015-08-22 19:53 615 查看

我这里用的是eCharts数据库图标,网址为：http://echarts.baidu.com/index.html 。

1)接收表单的数据,然后用json_encode()对接收的数据进行处理

2)在js中进行拼接并用eval()函数执行,主要是要对接受的数据中重复的键进行合并，并计算出含该同样键的数目,

比如我这里的在数据库中含5条数据,就像这样[ {'id':'1' , 'temperatrue':'30'},{'id':'2' , 'temperatrue':'30'},{'id':'3' , 'temperatrue':'30'},{'id':'4' , 'temperatrue':'33'},{'id':'5' , 'temperatrue':'33'}] 然后经过函数处理后变为[ {'num':'3','name':'30'},{'num':'2','name':'33'} ],变成了其对应的健名对应的数目

说多无益，代码如下：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>数据图表</title>
</head>
 
<body>
<?php
/*功能：接受参数 并进行圆饼图展示
**POST的参数：
** $start_time（开始时间）$end_time(结束时间)
** $user_id (我用了客户的自增id标记记录所以这里是自增id)
** $data_type(数据类型分别对应数据库上的3个字段名:temperature  wetness methane  其分别对应温度 湿度 甲烷浓度 )
** $data_sign(数据后面的符号 如temperature对应℃)
*/

include('./conn/conn.php');
$start_time = trim(addslashes($_POST['start_time']));
$end_time = trim(addslashes($_POST['end_time']));
$user_id = trim(addslashes($_POST['user_id']));
$data_type = trim(addslashes($_POST['data_type']));
$data_sign = iconv("gb2312", "UTF-8", $_POST['data_sign']); //转码 因为乱码了
//echo $data_sign."6666";
$conn = mysql_open();
$sql = "select * from echub where add_time>='".$start_time."' and add_time<='".$end_time."' and user_id='".$user_id."' order by ".$data_type;
$res = $conn -> getAll($sql);
//var_dump($res);
$res = (json_encode($res)); //要经过json才能在js使用
$data_type = (json_encode($data_type));
$data_sign = (json_encode($data_sign));
echo $data_type;

?>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px" width="100%" align="center"></div>
    <!-- ECharts单文件引入 ℃-->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">

    var data1 = "[";  //拼接第一个数据
    var data = <?php echo $res ?>;
//alert("666");
//alert(data);
    var data_type = <?php echo $data_type ?>;
    //alert("666");
    var data_sign = <?php echo $data_sign ?>;

    var result = (typeof data == 'string') ? JSON.parse(data) : data;

    //document.write(result[0]['temperature']+result.length);//测试
    for(var i=0; i < result.length; i++){
    if(i == 0){
    data1 += "'"+result[i][data_type]+""+data_sign+"'";    //data1 += "'"+result[i][data_type]+"℃'";
   }else{
    data1 += ",'"+result[i][data_type]+""+data_sign+"'";
   }
    }
    data1 += "]";

    // alert(data1);
    // document.write(data1);

var Value = "[";  //用于拼接data中的value
var data_all = "["; //拼接显示的圆饼图核心数据
//var arr1 = "['30℃','30℃','30℃','30℃','31℃','32℃','32℃']";
var ary = eval(data1);
var res = [];
ary.sort();
for(var i = 0;i<ary.length;)
{
var count = 0;
for(var j=i;j<ary.length;j++)
{
  if(ary[i] == ary[j])
  {
  count++;
  }
}
res.push([ary[i],count]);
i+=count;
}
for(var i = 0; i < res.length; i++){
if(i == 0){
Value += "'"+res[i][0]+"'";
}else{
Value += ",'"+res[i][0]+"'";
}
}
Value += "]";
Value = eval(Value);

for(var i = 0; i < res.length; i++){
if(i == 0){
data_all += "{value:"+res[i][1]+",name:'"+res[i][0]+"'}";
}else{
data_all += ",{value:"+res[i][1]+",name:'"+res[i][0]+"'}";
}
}
data_all += "]";
data_all = eval(data_all);
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
 
                var option = {
   title : {
       text: 'echub',
       subtext: '纯属虚构',
       x:'center'
   },
   tooltip : {
       trigger: 'item',
       formatter: "{a} <br/>{b} : {c} ({d}%)"
   },
   legend: {
       orient : 'vertical',
       x : 'left',
       data: Value   //['30℃','31℃','32℃','33℃','34℃']
   },
   calculable : true,
   series : [
       {
           name:'访问来源',
           type:'pie',
           radius : '55%',
           center: ['50%', '60%'],
           data: data_all
       }
   ]
};

                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
    </script>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航