09 五 08 用Flot插件在web中实现数据的曲线图
参加过“数字图书馆高级研讨班”的朋友们，肯定对林夏老师的信息可视化课程印象深刻。一般来说，信息可视化的程序，都是采用桌面程序来实现。这是因为桌面程序有丰富的API支持，实现起来比较容易。但是，相对于web，桌面程序不利于使用和传播，因此，如何在web中轻松实现信息的可视化，曾经是个棘手的问题。Java Applet、flash、SVG、ActiveX、JFreeChart、Silverlight等等技术，都给出了解决方案，但要求的技术成本有点高的。其实，使用简单的javascript，一样可以满足我们在web中实现信息可视化的大部分需求，只是因为相关标准不完善（例如canvas标签很长时间得不到承认和支持），一直以来不受重视。不过，随着web2.0的兴起，javascript成为宠儿，许多javascript框架出现之后，使用javascript在web中实现信息可视化方面，迅速成为焦点。
采用javascript来做这一事情的好处是显而易见的，所以，大部分javascript框架都实现了丰富的绘图接口，并且有更多的第三方插件基于基本的javascript框架，对相关功能进行封装，以便于我们更好的应用。本文中介绍的Flot插件就是其中的佼佼者。
Flot是基于jQuery的、纯脚本的、开源的插件，由丹麦的iola工作室开发，它的官方站点在http://code.google.com/p/flot/，上面有例子和源码下载。
接下来，如下图所示，我们使用Flot来实现一个简单的例子，将每个月和每天的入馆人数用一条曲线图展示出来（马上下载本例子的源码）。
Tags: canvas, chart, flot, graph, javascript, plot, visualization, web, web2.0, 信息可视化, 开放代码, 曲线图, 源码下载
22 五 07 根据浏览器分辨率自动调整网页宽度的一个例子
）及更高的分辨率，将逐步成为主流。就用户的使用习惯而言，纵向滚动是很自然的，但横向滚动，就让人恼火了。所以，当前的大部分web页面设计，均采用800px宽度居中的形式来设计。这样的好处无疑是很明显的，较好的兼容性，无横向滚动，并且由于固定大小，界面可以设计得很美观。Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=GBK”
/>
<meta name=”Security” content=”public” />
<meta name=”DC.Rights” content=”Copyright (c) 2007 by Johnson
Zhong” />
<meta name=”KEYWords” contect=”xhtml sample” />
<meta name=”DEscription” contect=”xhtml sample” />
<meta name=”Author” contect=”Johnson Zhong” />
<meta name=”Robots” contect=”all” />
<style type=”text/css”>
BODY{
MARGIN: 0px;
}
#wrap {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px;
BACKGROUND: #ffffff; PADDING-BOTTOM: 10px; OVERFLOW: hidden;
WIDTH:
expression(this.offsetParent.clientWidth<800?”770px”:”99%”);
PADDING-TOP: 2px; min-width: 770px
}
#main {
CLEAR: both; BACKGROUND: #fff; MARGIN-TOP:
6px;
}
#leftbar {
BORDER-RIGHT: #dddddd 1px solid; BORDER-LEFT:
#dddddd 1px solid; BORDER-TOP: #dddddd 1px solid; BORDER-BOTTOM:
#dddddd 1px solid; BACKGROUND: #F2F9DC; FLOAT: left;
PADDING-BOTTOM: 5px; WIDTH: 188px; height:100%
}
#cenbar {
FLOAT: left; PADDING-BOTTOM: 10px; WIDTH:
100%;
}
#sublogopanel {
CLEAR: both; width:100%; height:80px;
position:relative; BACKGROUND: url(/_img/ad-bg.jpg) repeat-y
left;
}
#rightbar {
FLOAT: left; PADDING-BOTTOM: 10px; OVERFLOW:
hidden; WIDTH: 180px; margin-left:0px; margin-top:0px;
background:#cccccc
}
</style>
<title>xhtml sample!</title>
</head>
<body>
<!–body层开始–>
<div id=”wrap”>
<div id=”main”>
<table width=”100%” height=”100%”
cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td width=”188″
height=”100%” valign=”top”>
<!–左边–>
<div id=”leftbar”>
<table
width=”100%” height=”100%” cellspacing=”0″ cellpadding=”0″
border=”0″>
<tr>
<td
height=”72″ valign=”top”> </td>
</tr>
</table>
</div>
<!–左边结束–>
</td>
<td width=”100%”
valign=”top”>
<!–中间内容–>
<div id=”cenbar”>
<table width=”100%”
height=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td
width=”100%”>
<div
id=”sublogopanel”>
<img
height=”80″ width=”388″
src=”/_img/sublogo_esource.jpg”>
</div>
</td>
</tr>
</table>
</div>
<!–中间内容结束–>
</td>
<td width=”180″
valign=”top”>
<!–右边–>
<div id=”rightbar”>
<table width=”100%”
height=”72″>
<tr>
<td
width=”180″ height=”1″>
</td>
</tr>
</table>
</div>
<!–右边结束–>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
以上代码中，将页面树向分为三栏，其中左右栏宽度固定，中间栏宽度自动调整。
加红的两处地方比较关键，第一处：
WIDTH:
expression(this.offsetParent.clientWidth<800?”770px”:”99%”);
通过在CSS样式表中应用javascript判断：如果当前窗口宽度小于800，则页面宽度为770px，否则为当前窗口宽度*99%；
<img height=”80″
width=”388″ src=”/_img/sublogo_esource.jpg”>
在中间层插入一张图片，确保当用户窗口宽度小于800时候，页面宽度不在缩小。
浏览效果分别如下：
1280*1024
1024*768
800*600
Tags: CSS, javascript, xhtml, 宽度, 开放代码, 浏览器, 窗口
07 三 07 根据用户浏览器语言向用户显示合适的页面
我们的用户来自五湖四海，一个成功的网站，应该具备多种语言版本以适应不同国家的用户。一些网站的做法是提供了语言选择的链接，一些网站则直接根据用户所使用的语言直接跳转到相应的页面。
要知道用户所使用的语言，一个简单的办法就是根据Http
Request信息检测到用户所使用的浏览器的语言代码。知道了用户所使用的语言，即可跳转到相应语言版本的页面对用户请求进行反馈。
在ASP中，我们可以通过Request对象的ServerVariables集合中的HTTP_ACCEPT_LANGUAGE值获得我们想要的语言信息，下面是一个用ASP写成的简单的跳转例子。
|
‘获取客户端浏览器HTTP_ACCEPT_LANGUAGE值 Request.ServerVariables(”HTTP_ACCEPT_LANGUAGE”) ‘将该值转为小写
‘取该值前两位
strArea = if Response.Redirect(”cn/index.asp”) else Response.Redirect(”en/index.asp”) end if |
HTTP_ACCEPT_LANGUAGE的相关值如下：
Afrikaans (af)
Albanian (sq)
Basque (eu)
Bulgarian (bg)
Byelorussian (be)
Catalan (ca)
Chinese (zh)
Chinese/China (zh-cn)
Chinese/Taiwan (zh-tw)
Chinese/Hong Kong (zh-hk)
Chinese/singapore (zh-sg)
Croatian (hr)
Czech (cs)
Danish (da)
Dutch (nl)
Dutch/Belgium (nl-be)
English (en)
English/United Kingdom (en-gb)
English/United Satates (en-us)
English/Australian (en-au)
English/Canada (en-ca)
English/New Zealand (en-nz)
English/Ireland (en-ie)
English/South Africa (en-za)
English/Jamaica (en-jm)
English/Belize (en-bz)
English/Trinidad (en-tt)
Estonian (et)
Faeroese (fo)
Farsi (fa)
Finnish (fi)
French (fr)
French/Belgium (fr-be)
French/France (fr-fr)
French/Switzerland (fr-ch)
French/Canada (fr-ca)
French/Luxembourg (fr-lu)
Gaelic (gd)
Galician (gl)
German (de)
German/Austria (de-at)
German/Germany (de-de)
German/Switzerland (de-ch)
German/Luxembourg (de-lu)
German/Liechtenstein (de-li)
Greek (el)
Hindi (hi)
Hungarian (hu)
Icelandic (is)
Indonesian (id or in)
Irish (ga)
Italian (it)
Italian/ Switzerland (it-ch)
Japanese (ja)
Korean (ko)
Latvian (lv)
Lithuanian (lt)
Macedonian (mk)
Malaysian (ms)
Maltese (mt)
Norwegian (no)
Polish (pl)
Portuguese (pt)
Portuguese/Brazil (pt-br)
Rhaeto-Romanic (rm)
Romanian (ro)
Romanian/Moldavia (ro-mo)
Russian (ru)
Russian /Moldavia (ru-mo)
Scots Gaelic (gd)
Serbian (sr)
Slovack (sk)
Slovenian (sl)
Sorbian (sb)
Spanish (es or es-do)
Spanish/Argentina (es-ar)
Spanish/Colombia (es-co)
Spanish/Mexico (es-mx)
Spanish/Spain (es-es)
Spanish/Guatemala (es-gt)
Spanish/Costa Rica (es-cr)
Spanish/Panama (es-pa)
Spanish/Venezuela (es-ve)
Spanish/Peru (es-pe)
Spanish/Ecuador (es-ec)
Spanish/Chile (es-cl)
Spanish/Uruguay (es-uy)
Spanish/Paraguay (es-py)
Spanish/Bolivia (es-bo)
Spanish/El salvador (es-sv)
Spanish/Honduras (es-hn)
Spanish/Nicaragua (es-ni)
Spanish/Puerto Rico (es-pr)
Sutu (sx)
Swedish (sv)
Swedish/Findland (sv-fi)
Thai (ts)
Tswana (tn)
Turkish (tr)
Ukrainian (uk)
Urdu (ur)
Vietnamese (vi)
Xshosa (xh)
Yiddish (ji)
Zulu (zu)
Tags: HTTP_ACCEPT_LANGUAGE, 开放代码, 浏览器, 语言, 跳转
11 十 06 一个切割大图的java程序
将一张大图片切割成100*100的图片.
用了batik包,可以从这里下载：http://apache.justdn.org/xml/batik/
import org.apache.batik.apps.rasterizer.DestinationType;
import org.apache.batik.apps.rasterizer.SVGConverter;
import javax.imageio.ImageIO;
import java.io.File;
import java.awt.*;
import java.awt.image.BufferedImage;
public class ImageTiler {
private
static final String BASE_DIR = “jpg/”;
private
static final int TILE_WIDTH = 100;
private
static final int TILE_HEIGHT = 100;
public
static void main(String[] args) throws Exception {
// create the tiles
String[][] sources = { { “0/0.jpg”, “0″ },{”0/1.jpg”, “1″} };
for (int i = 0; i < sources.length; i++) {
String[] source = sources[i];
BufferedImage bi = ImageIO.read(new File(BASE_DIR +
source[0]));
int columns = bi.getWidth() / TILE_WIDTH;
int rows = bi.getHeight() / TILE_HEIGHT;
for (int x = 0; x < columns; x++) {
for (int y = 0; y < rows; y++) {
BufferedImage img = new BufferedImage(TILE_WIDTH,
TILE_HEIGHT,
bi.getType());
Graphics2D newGraphics = (Graphics2D) img.getGraphics();
newGraphics.drawImage(bi, 0, 0, TILE_WIDTH, TILE_HEIGHT,
TILE_WIDTH * x, TILE_HEIGHT * y,
TILE_WIDTH * x + TILE_WIDTH,
TILE_HEIGHT * y + TILE_HEIGHT,
null);
ImageIO.write(img, “jpg”, new File(BASE_DIR + “0/” +
“x” + x + “y” + y + “z” + source[1] + “.jpg”));
}
}
}
}
}
28 九 06 根据客户端分辨率改变图像大小的JS脚本
<img id=”img1″ src=”img/photo/p01.jpg”>
<script language=javascript>
if(window.screen.width == 800 && window.screen.height ==
600){
document.getElementById(”img1″).width=”480″;
document.getElementById(”img1″).height=”360″;
} else if(window.screen.width == 1024&&
window.screen.height == 768){
document.getElementById(”img1″).width=”640″;
document.getElementById(”img1″).height=”480″;
}
</script>
Tags: javascript, 分辨率, 图像大小, 开放代码
