现在位置首页 / 生活多美好 /正文

highcharts实例教程:结合php与mysql生成折线图

作者: IT小兵 | 2014年5月30日| 热度:℃ | 评论: |参与:

评论:

现在都流行jquery的报表,一般还是Html5的。前几天分享的是Jquery echarts报表插件。更多参考:

[zrender教程-如何搭建环境及配置]

[Ztree教程-asp.net下代码部署及服务端获取数据的例子]


今天分享一个同样很好用很流行的报表插件Highcharts:


Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图、折线图、面积图、柱状图、饼图、散点图 等多达28种不同类型的图表,还支持3D立体图表的生成,可以满足你对Web图表的任何需求 !而且Highcharts对学习者、非商业机构是免费使用的。

案例场景:要求针对技术cto网站,直观地显示一周网站pv、uv的变化曲线;
编程实现:
1、首先创建数据库,保存网站每天的数据;
CREATE TABLE `line` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `pv` int(10) DEFAULT NULL,
  `uv` int(10) DEFAULT NULL,
  `did` int(10) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

2、编写php代码从数据库中获取到每天网站的数据;
include_once('connect.php');
$res = mysql_query("select * from line");
while($row = mysql_fetch_array($res)){
    $pv[] = intval($row['pv']);  //注意这里必须要用intval强制转换,不然图表不能显示
    $uv[] = intval($row['uv']);
}
$data = array(array("name"=>"pv","data"=>$pv),array("name"=>"uv","data"=>$uv));
$data = json_encode($data);    //把获取的数据对象转换成json格式

效果展示:


本文出自技术CTO:http://www.jscto.net,转载请注明出处。


点击阅读本文所属分类的更多文章: 生活多美好 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询