php将数据库数据转换成图表,如何用PHP通过拼接数据到显示在数据库图表上

我这里用的是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'} ],变成了其对应的健名对应的数目

说多无益，代码如下：

数据图表

/*功能：接受参数 并进行圆饼图展示

**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;

?>

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

{

var count = 0;

for(var j=i;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}
{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);

}

);