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实现从mysql数据库获取数据生成实时折线图。开发平台是用eclipse实现的,是一个项目,用jsp显示从数据库读取的实时折线图。
使用Highcharts结合PHP与Mysql生成饼状图 为了更好的讲解,实例中在Mysql数据库中建立一张表chart_pie,用于表示各搜索引擎带来的访问量,表中分别有id、title和pv三个字段,id是自增长整型、主键;title表示搜素...
android 调用highcharts.js 实现折线图展示
网上找的不能用,经过修改,由于缺少很多文件,还有相关js文件,css全部获取到本地,经过修改,现在完美显示,做图表的可以做个参考
highcharts实例+教程,包含中文API帮助文档,ajax实例
Highcharts+PHP+Mysql生成饼状统计图
highcharts快速生成百万数据点折线图.rar
HighCharts的2017年使用的实例,此番为折线图,一个图里包含多条折线,业务需求:展示多个支付方式,在某段时间内,刷卡金额的趋势折线图。我用的方法比较笨,将支付方式一个一个列出来了,还有优化的空间,不过完全...
Java和Highcharts结合实现折线图
网页图表Highcharts实践教程基础篇
强大的highcharts 内置php+mysql饼状图动态开发实例 及各种曲线 柱状图 饼状图示例!
折线图demo,因为jfreechart与struts2结合使用配置太麻烦了。
highcharts基础教程
Highcharts 是一个用纯JavaScript编写的一个图表库,HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
highchartsLineClient:这是使用highcharts的折线图客户端
NULL 博文链接:https://takeme.iteye.com/blog/1994243
解决highcharts多级下钻问题,下钻过程中使用了多种图例,自带上钻功能 c#,java使用方法一样,demo中使用c#方法实现 vs打开直接可以运行无需连接数据库 大数据可使用异步下钻...
6、支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图 7、易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表 8、时间轴:可以精确到毫秒 9、Ajax支持: ...
Highcharts是很成熟的一个jquery插件,可以生成各种图表(柱形图/折线图/饼图),并附有例子。
Highcharts使用教程(1):制作简单图表