Highcharts 结合php mysql获取数据 画折线图

3 篇文章 0 订阅
2 篇文章 0 订阅

软件下载:

http://www.hcharts.cn/resource/Highcharts-4.0.1.zip

解压到nginx 的工作目录下,例如:tar xf Highcharts-4.0.1.zip -C /usr/local/nginx/html/

cd /usr/local/nginx/html/picture/Highcharts-4.0.1


首先可以打开 http://localhost/Highcharts-4.0.1/index.html

查看示例图,根据需求,可以 从 /usr/local/nginx/html/picture/Highcharts-4.0.1/examples 目录下

找到合适自己的模板,然后修改,并完成自己的图表。



mysql> SELECT day,count(id) from logstg  group by day;
+------------+-----------+
| day        | count(id) |
+------------+-----------+
| 2014-09-09 |         1 |
| 2014-09-10 |         3 |
| 2014-09-11 |         3 |
| 2014-09-12 |         6 |
| 2014-09-15 |         2 |
| 2014-09-16 |         5 |
| 2014-09-17 |         6 |
| 2014-09-18 |         4 |
| 2014-09-19 |         3 |
| 2014-09-22 |         1 |

此处  我需要完成的是 php代码从数据库中获取到每天网站的数据,其中day 作为横坐标轴,count(id)作为纵坐标轴

1.php获取数据 自己 根据这段代码 测试 是否可以正常获取数据。  

<?php
        $con = mysql_connect('172.16.4.134','mysql','homelink');
        mysql_select_db("logdb", $con);
        $sql = "SELECT day,count(id) from logstg group by day;";
        $result=mysql_query($sql,$con);
while($row = mysql_fetch_array($result))
          {
                $day[]=$row['day'];
                $count[]=intval($row['count(id)']);
          }
        $day = json_encode($day);
        print_r($day);
$data1 = array(array("name"=>"count","data"=>$count));
        $data1 = json_encode($data1);    //把获取的数据对象转换成json格式
        print "<br><br>$data1";
?>

2.测试完成后,完成下面代码mypic.html。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>

<?php
$con = mysql_connect('172.16.4.134','mysql','homelink');
mysql_select_db("logdb", $con);
$sql = "SELECT day,count(id) from logstg group by day;";
$result=mysql_query($sql,$con);

while($row = mysql_fetch_array($result))
{
$day[]=$row['day'];
$count[]=intval($row['count(id)']);
}
$day = json_encode($day);

$data1 = array(array("name"=>"count","data"=>$count));
$data1 = json_encode($data1); //把获取的数据对象转换成json格式
?>

<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'Publish times',
x: -20 //center
},
subtitle: {
text: 'write by:zhaobin',
x: -20
},
xAxis: {
categories: <?php echo $day; ?>
},
yAxis: {
title: {
text: '次 数'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ' 次'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: <?php echo $data1; ?>
});
});
</script>

</head>
<body>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>

3.然后就可以访问了。
 http://localhost/Highcharts-4.0.1/ mypic.html


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值