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,转载请注明出处。

highcharts实例教程一:结合php与mysql生成折线图的更多相关文章

  1. 使用Highcharts生成折线图_at last

    //数据库数据的读取,读取数据后数据格式的转换,还有highchart数据源的配置,伤透了脑筋. anyway,最终开张了.哈哈! 数据库连接:conn_orcale.php <?php $db ...

  2. 使用Highcharts生成折线图与曲线图

    折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...

  3. 【Cocos2d实例教程一】xcode5下Cocos2d环境的搭建

    (转载请注明出处:http://blog.csdn.net/buptgshengod) 第一步,现在要安装集成环境xcode5,安装xcode5需要系统至少是os x 10.8.5. 第二步,下载co ...

  4. PowerDesigner连接 MySQL 生成 ER图

    powerdesigner 16.5 http://www.pcsoft.com.cn/soft/27495.html jdk 1.8 32位 https://mirrors.huaweicloud. ...

  5. highcharts实例教程二:结合php与mysql生成饼图

    上回我们分析了用highcharts结合php和mysql生成折线图的实例,这次我们以技术cto网站搜索引擎流量为例利用highcharts生成饼图. 饼图通常用在我们需要直观地显示各个部分所占的比例 ...

  6. HighCharts实现多数据折线图分列显示

    HighCharts实现多数据折线图分列显示 BY ZYZ HighCharts是一个很好用的web端绘图插件,用起来很方便,它的官方支持很好.并且有中文API(不全然).画出来的图像也挺美丽的. 近 ...

  7. MySQL 【教程一】

    前言 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库. 每个数据库都有一个或多个不同的 API 用于创建,访问,管理,搜索和复制所保存的数据. 我们也可以将数据存 ...

  8. Quartz教程一:使用quartz

    原文链接 | 译文链接 | 翻译:nkcoder | 校对:方腾飞 本系列教程由quartz-2.2.x官方文档翻译.整理而来,希望给同样对quartz感兴趣的朋友一些参考和帮助,有任何不当或错误之处 ...

  9. CRL快速开发框架系列教程一(Code First数据表不需再关心)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

随机推荐

  1. HDOJ 1214 圆桌会议

    Problem Description HDU ACM集训队的队员在暑假集训时经常要讨论自己在做题中遇到的问题.每当面临自己解决不了的问题时,他们就会围坐在一张圆形的桌子旁进行交流,经过大家的讨论后一 ...

  2. nyist 58 最小步数 BFS

    最少步数 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 1,0 ...

  3. Dolls - 4160(简单二分图匹配)

    题意:有一些箱子,大箱子可以套小箱子,但是必须h>h,w>w,l>l,求出来最外面能剩下几个箱子无法被嵌套.   分析:思考每个箱子都只会被别的箱子套一次,所以构成一二分匹配模型,只 ...

  4. poj2007

    极角排序,其实是叉乘排序 #include <iostream> #include <algorithm> #include <math.h> #include & ...

  5. ganglia 启动命令

    gmond 版本号 3.1.7 sudo service ganglia-monitor start 验证是否打开 telnet localhost 8649 gmetad 版本号3.1.7 serv ...

  6. XMPPFrameWork IOS 开发(二)- xcode配置

    原始地址:XMPPFrameWork IOS 开发(二) 译文地址:   Getting started using XMPPFramework on iOS 介绍 ios上的XMPPFramewor ...

  7. 搜搜(www.soso.com),I 老虎油!

    搜搜(www.soso.com),I 老虎油! 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用 ...

  8. STL——空间配置器(构造和析构基本工具)

    以STL的运用角度而言,空间配置器是最不需要介绍的东西,它总是隐藏在一切组件(更具体地说是指容器,container)的背后,默默工作,默默付出.但若以STL的实现角度而言,第一个需要介绍的就是空间配 ...

  9. Android(java)学习笔记221:开发一个多界面的应用程序之不同界面间互相传递数据(短信助手案例)

    1.首先我们看看下面这个需求: 这里我们在A界面上,点击这个按钮"选择要发送的短信",开启B界面上获取网络上各种短信祝福语,然后B界面会把这些网络祝福语短信发送给A界面到" ...

  10. discuz! X3.2 自定义后台门户模块模板里的标签

    这里只提供对源码的修改, 至于插件, 暂不考虑... 想在首页里展示一些自定义字段的内容, 奈何dz无此功能, 无奈去扒源码. 首先切到 source 文件夹下 1. 在 class/block/po ...