用Highchart画一个小图玩下
来源:互联网 发布:人脸识别原理及算法 编辑:程序博客网 时间:2024/04/28 20:27
前言
完全是为了玩儿的哈。。。just enjoy it 。。。正如计算机科学的鼻祖高德纳(Donald Knuth)所说,编程是一门艺术,而不是一门科学! 虽然我离这个比较远,然得努力啊
目的
主要是想学习下这里面的第一种布局, coolshell真是个好地方!
CSS 布局:40个教程、技巧、例子和最佳实践
1-使用CSS完成三栏固定布局结构- 这篇文章解释了如何实现一个基于的HTML/CSS来设计一个简单的带有基本要素(顶部的logo条,导航条,文本区,定义分类的中部栏,右边侧栏插入google的120X600的广告区)的固定三栏页面布局。
初步折腾效果
基本上大部分都是"死"的! 变动态的, 还是找个MVC框架研究下, 可能偶尔工作中需要用!
test1.php
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="test1.css"><link rel="shortcut icon" href="favicon.ico" /><title>I love Helen!</title></head><body bgcolor="#8A8A8A"><div id="container" ><!--<div id="topbar">Top</div>--><div id="navbar" style="background:#696969; color:#FFF"><a href="http://localhost/colin/test1.php">首页</a><a href="http://blog.csdn.net/lin_credible" target="_blank">关于colin</a><a href="mailto:linuxtaolinran@gmail.com">更多</a></div><div id="main" style="background:#CCCCCC; color:#000"><div id="column_left"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript">$(function () {$('#column_left').highcharts({chart: {type: 'column'},title: {text: '配置下发结果统计'},subtitle: {text: '目的: 动态跟踪'},xAxis: {categories: ['结果']},yAxis: {min: 0,title: {text: '量(IP数)'}},tooltip: {headerFormat: '<span style="font-size:10px">{point.key}</span><table width="100">',pointFormat: '<tr><td style="color:{series.color};padding:0;">{series.name}:</td>' +'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true},plotOptions: {column: {pointPadding: 0.2,borderWidth: 0}},series: [{name: '成功',data: [80]}, {name: '失败',data: [10]}, {name: '下发中',data: [20]}]});});</script><script src="./highcharts.js"></script></div><div id="column_right"><h2>失败IP列表</h2><?php $fail = array('127.0.0.1','192.168.1.1','255.255.255.0','8.8.8.8','0.0.0.0');?><lo><?php foreach ($fail as $key) : ?><li><?php echo $key;?></li><?php endforeach; ?></lo></div><div id="column_right_adsense"><h2>介绍</h2>这里提供更快捷和已配置好的**入口!<br><hr/><?php date_default_timezone_set('Etc/GMT-8');?><time <?php echo "datetime=".date("Y-m-d");?> class="icon"><em><?php echo date("l");?></em><strong><?php echo date("F");?></strong><span><?php echo date("j");?></span></time></div><!-- Don't remove spacer div. Solve an issue about container height --><div class="spacer"></div></div><div id="footer"><p> 版本@2014 作者:Colǐn[ux]-单引号</p></div></div></body></html>
动一下
data3.php
test3.php
效果:
参考
[1]: 三栏固定布局的css;
[2]: 右边那个日历的css;
[3]: column_left里面的那个图表参考;
[4]: css-text-shadow(不过又没用了);
[5]: how-to-load-mysql-results-to-highcharts-using-json
[6]: how-to-create-dynamic-x-axis-data-using-json
遗留sql问题
1. 如何让count(*)为null的时候返回0;
2. 存储过程如何返回多行?
参考代码
1. 三栏固定布局css步骤
Step 1: HTML file structure
Create a new page and copy and past this code within <body> tag:
<div id="topbar">Top Bar/Logo Layer</div>
<div id="navbar">
<a href="index.html?about">About</a>
<a href="mailto:myemailaddres@email.com">Contact me</a>
<div id="main">
<div id="column_left">
<h1>Post Title</h1>
<h2>12 january 2008</h2>
<p>Add your text here</p>
</div>
<div id="column_right">
<h3>Categories</h3>
Right Content to add Categories, web 2 widget (twitter, mybloglog recent readers...)
</div>
<div id="column_right_adsense">
<h3>AdSense</h3>
Adsense 120 X 600
</div>
<!-- Don't remove spacer div. Solve an issue about container height -->
<div class="spacer"></div>
</div>
<div id="footer">© 2008 Information about your site</div>
</div>
Step 2: CSS file
Now, create a new css file and link it into index.html
HTML Redefine Tags
------------------------------ */
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;margin:20px; padding:0;}
input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0;margin-bottom:10px;}
a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/* #container has an absolute width (780 pixel) */
#container{width:780px; margin:0 auto;}
#navbar{width:auto; display:block; height:28px;}
#main{width:auto; display:block; padding:10px 0;}
#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{width:120px; float:left;}
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; padding:10px 0; font-size:11px;color:#666666;}
/* ------------------------------
CUSTOM CLASSES
------------------------------ */
/* Add here your custom classes ... */
- 用Highchart画一个小图玩下
- highchart
- highchart
- highchart
- 用highchart实现表格的jsp写法
- 遇到一个highchart 获取json数据展现问题
- 模拟从后台取数据,用highchart画图
- amchart highchart
- highchart 属性
- 学习highchart
- highchart小结
- highchart例子
- HighChart操作
- highchart使用
- 浅析highchart
- highchart柱状图
- highchart图表
- highChart connectNulls
- uva 798 - Tile Puzzle(回溯)
- STM32 keil mdk启动代码发分析
- javascript内部原理篇[javascript实现聚合]
- 移除连续重复的字符串元素
- 新人报到
- 用Highchart画一个小图玩下
- [Jweb] JSP-编程 01 (Directive-page)
- 黑加仑
- c++中的命名控制
- 再见2013,你好2014
- 进程最大可访问的虚拟内存空间
- 2014年了
- Lowest Common Multiple Plus
- linux TCP 服务器编程(一):简单的迭代服务器