Highcharts 结合php mysql获取数据 画折线图
2014-09-24 09:50
716 查看
软件下载：
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
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用Highcharts结合PHP与Mysql生成饼状图
- 使用Highcharts结合PHP与Mysql生成饼状图
- PHP获取mysql数据表的字段名称和详细信息的方法
- PHP + Mysql 学习之三（获取数据）
- 结合PHP脚本添加和查询MySQL数据的基本教程
- php获取mysql某数据表中所有字段
- PHP获取mysql数据表的字段名称和详细信息的方法
- 用 PHP 从 MySQL 中获取数据
- java实现的highcharts与ajax结合动态实时获取数据更新图表
- 使用Highcharts结合PHP与Mysql生成饼状图
- php中获取mysql的汉字数据时显示问号问题
- highcharts实例教程二：结合php与mysql生成饼图
- 使用Highcharts结合PHP与Mysql生成饼状图
- php操作mysql获取html标签<select>下拉列表数据
- PHP: 使用mysql_fetch_array()来获取数据
- java实现的highcharts与ajax结合动态实时获取数据更新图表
- highcharts实例教程一：结合php与mysql生成折线图
- Jan 30 使用Highcharts结合PHP与Mysql生成饼状图
- 结合PHP脚本添加和查询MySQL数据的基本教程
- 使用Highcharts结合PHP与Mysql生成饼状图