用Highchart画一个小图玩下

最新推荐文章于 2023-12-12 13:22:39 发布

TaoLR

最新推荐文章于 2023-12-12 13:22:39 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： php js 文章标签： css 布局

本文链接：https://blog.youkuaiyun.com/lin_credible/article/details/17734897

js 同时被 2 个专栏收录

36 篇文章

订阅专栏

php

12 篇文章

订阅专栏

前言

完全是为了玩儿的哈。。。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.youkuaiyun.com/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

// 擦，直接连mysql得了，哈哈

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="container">
<div id="topbar">Top Bar/Logo Layer
 </div>
<div id="navbar">

  <a href="
  index.html?home"
  >Home
  </a>
  
 
  <a href=
  "index.html?about"
  >About
  </a>
  
 
  <a href=
  "mailto:myemailaddres@email.com"
  >Contact me
  </a>
  
 
  
 
</div>
<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;}
#topbar{width:auto;display:block;height:60px;}
#navbar{width:auto; display:block;height:28px;}

   #navbar a{
   heigth
   :
   28px
   ; 
   line-height
   :
   28px
   ; 
   padding
   :
   0 8px
   ;
   display
   :
   inline
   ;}
   
 
  

#main{width:auto; display:block; padding:10px 0;}

   #column_left{
   width
   :
   460px
   ; 
   margin-right
   :
   20px
   ; 
   float
   :
   left
   ;}
   
 
   #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 ... */