手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表全部文章

杂记：flashchart,ejs,sprintf

Submitted by gouki on 2010, August 26, 9:28 AM

在看cnblog的时候，看到一些文章，确实可以记录。再加上工作中也会遇到问题，因此总会选择性的记录。。

1、flash chart

现在画图的工具越来越多，不再象以前那样用jpgraph了。毕竟没有flash来的方便，而且还能够变化，动态的东西总是让人感觉不错。其实chart这东西，有很多，比如google chart之类的。但flash chart的话，常用的也就那么几个：open flash chart,fushion chart，还有一个Aw chart（ 这个名字记不清了，只知道fund123.com【多来米】就是用的这个）。open呢。。很多人用，但模版一般般，不细细研究的话，做出来的Flash总感觉不好看。其他的两个挺不错，功能更加强大，不过好象都是免费版会有LOGO浮在上面（以前我就解决过这个问题，请看：如何用DIV挡住SWF？）

博客园的文章是把open和fusion的一些参数进行了分析，可以看：open-flash-chart 和 FusionCharts Free 探究【好象博客园今天坏了？】，整理了一些Fusion的参数：网上整理了一些FCF的常用属性:
功能特性
animation 是否动画显示数据，默认为1(True)
showNames 是否显示横向坐标轴(x轴)标签名称
rotateNames 是否旋转显示标签，默认为0(False):横向显示
showValues 是否在图表显示对应的数据值，默认为1(True)
yAxisMinValue 指定纵轴(y轴)最小值，数字
yAxisMaxValue 指定纵轴(y轴)最小值，数字
showLimits 是否显示图表限值(y轴最大、最小值)，默认为1(True)
图表标题和轴名称
caption 图表主标题
subCaption 图表副标题
xAxisName 横向坐标轴(x轴)名称
yAxisName 纵向坐标轴(y轴)名称
图表和画布的样式
bgColor 图表背景色，6位16进制颜色值
canvasBgColor 画布背景色，6位16进制颜色值
canvasBgAlpha 画布透明度，[0-100]
canvasBorderColor 画布边框颜色，6位16进制颜色值
canvasBorderThickness 画布边框厚度，[0-100]
shadowAlpha 投影透明度，[0-100]
showLegend 是否显示系列名，默认为1(True)
字体属性
baseFont 图表字体样式
baseFontSize 图表字体大小
baseFontColor 图表字体颜色，6位16进制颜色值
outCnvBaseFont 图表画布以外的字体样式
outCnvBaseFontSize 图表画布以外的字体大小
outCnvBaseFontColor 图表画布以外的字体颜色，6位16进制颜色值
分区线和网格
numDivLines 画布内部水平分区线条数，数字
divLineColor 水平分区线颜色，6位16进制颜色值
divLineThickness 水平分区线厚度，[1-5]
divLineAlpha 水平分区线透明度，[0-100]
showAlternateHGridColor 是否在横向网格带交替的颜色，默认为0(False)
alternateHGridColor 横向网格带交替的颜色，6位16进制颜色值
alternateHGridAlpha 横向网格带的透明度，[0-100]
showDivLineValues 是否显示Div行的值，默认？？
numVDivLines 画布内部垂直分区线条数，数字
vDivLineColor 垂直分区线颜色，6位16进制颜色值
vDivLineThickness 垂直分区线厚度，[1-5]
vDivLineAlpha 垂直分区线透明度，[0-100]
showAlternateVGridColor 是否在纵向网格带交替的颜色，默认为0(False)
alternateVGridColor 纵向网格带交替的颜色，6位16进制颜色值
alternateVGridAlpha 纵向网格带的透明度，[0-100]
数字格式
numberPrefix 增加数字前缀
numberSuffix 增加数字后缀 % 为 '%25'
formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K（千）或M（百万）；若取0,则不加K或M
decimalPrecision 指定小数位的位数，[0-10] 例如：='0' 取整
divLineDecimalPrecision 指定水平分区线的值小数位的位数，[0-10]
limitsDecimalPrecision 指定y轴最大、最小值的小数位的位数，[0-10]
formatNumber 逗号来分隔数字(千位，百万位),默认为1(True)；若取0,则不加分隔符
decimalSeparator 指定小数分隔符,默认为'.'
thousandSeparator 指定千分位分隔符,默认为','
Tool-tip/Hover标题
showhovercap 是否显示悬停说明框，默认为1(True)
hoverCapBgColor 悬停说明框背景色，6位16进制颜色值
hoverCapBorderColor 悬停说明框边框颜色，6位16进制颜色值
hoverCapSepChar 指定悬停说明框内值与值之间分隔符,默认为','
折线图的参数
lineThickness 折线的厚度
anchorRadius 折线节点半径，数字
anchorBgAlpha 折线节点透明度，[0-100]
anchorBgColor 折线节点填充颜色，6位16进制颜色值
anchorBorderColor 折线节点边框颜色，6位16进制颜色值
Set标签使用的参数
value 数据值
color 颜色
link 链接（本窗口打开[Url]，新窗口打开[n-Url]，调用JS函数[JavaScript:函数]）
name 横向坐标轴标签名称 

事实上，官方例子的xml里面都有注释，只是是英文版而已

2、ejs，也就是上次说的司徒正美的javascript模版引擎，一下出0.3版了，javascript模板系统 ejs v3，由于已经介绍过，不再介绍。

3、javascript的参数是可变的，因此也可以利用这个功能来写一些类似于重构的代码，但这里的例子是类似于PHP的sprintf，可以参考一下：javascript通过arguments实现string.format函数，PHP还有一个vsprintf，如果看好了这篇，事实上，你也可以尝试模似vsprintf了。

4、最后，来一段这个分享一封拒绝老板下班时间安排工作的邮件，毕竟现在这个年头加班已经成了家长便饭了吧？是主动提出还是被动加班？这封邮件不错，但很可能只适合国外。国内？不加班，你走人好了。。

Tags: flashchart, ejs, sprintf

Misc | 评论:1 | 阅读:18393

意外：Editplus可以查看16进制了？

Submitted by gouki on 2010, August 25, 3:50 PM

众所周知，Editplus是不支持查看16进制的文件的，那可是ultraEdit的特长。

因此，上午有人在QQ群里问Editplus是否支持16进制查看的时候，我毫不犹豫的说不支持，但下午，我在使用Editplus的时候，突然发现了工具栏上有个图标：

大小: 3.82 K 尺寸: 97 x 73 浏览: 2415 次 点击打开新窗口浏览全图

Hx？16进制？于是乎随便打开一个文件，并点击一下。。结果真的出来了

文件内容如下：

大小: 9.18 K 尺寸: 230 x 90 浏览: 2210 次 点击打开新窗口浏览全图

点击Hx图标，显示：

大小: 19.69 K 尺寸: 500 x 76 浏览: 2141 次 点击打开新窗口浏览全图

看来，我真的落伍了。。打开官网看了一下changelog，果然，就在第一条：

大小: 14.88 K 尺寸: 343 x 154 浏览: 2402 次 点击打开新窗口浏览全图

Tags: editplus, ultraedit, hex

Software | 评论:0 | 阅读:49411

js模拟php:print_r

Submitted by gouki on 2010, August 24, 2:04 PM

在PHP中，我们打印一个数组或者对象的时候，都是用print_r，相对比较直观，可是javascript就不行。翻了翻资料，也看到一些代码的写法。这里是一个简单的处理（不能打印window,document等对象）：

JavaScript代码
  1. function print_r( $value ){  
  2.     if($value.constructor == Array || $value.constructor == Object ){  
  3.         document.write("<ul>");  
  4.         for (var $i in $value){  
  5.             if($value[$i].constructor == Array || $value[$i].constructor == Object ){  
  6.                 document.write("<li>["+$i+"] => " + typeof( $value ) + " </li><ul>");  
  7.                 print_r($value[$i]);  
  8.                 document.write("</ul>");  
  9.             }else{  
  10.                 document.write("<li>["+$i+"] => " + $value[$i] + "</li>");  
  11.             }  
  12.         }  
  13.         document.write("</ul>");  
  14.     }  
  15. }  
  16. var s = {};  
  17. s.i = '123';  
  18. s.o = {};  
  19. s.o.test = 'tt';  
  20. print_r(s);  

 

然后看了一下phpjs.org，它上面的print_r就比较复杂了。。。

JavaScript代码
  1. function print_r (array, return_val) {  
  2.     // Prints out or returns information about the specified variable    
  3.     //   
  4.     // version: 1008.1718  
  5.     // discuss at: http://phpjs.org/functions/print_r    // +   original by: Michael White (http://getsprink.com)  
  6.     // +   improved by: Ben Bryan  
  7.     // +      input by: Brett Zamir (http://brett-zamir.me)  
  8.     // +      improved by: Brett Zamir (http://brett-zamir.me)  
  9.     // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)    // -    depends on: echo  
  10.     // *     example 1: print_r(1, true);  
  11.     // *     returns 1: 1  
  12.       
  13.     var output = "", pad_char = " ", pad_val = 4, d = this.window.document;    var getFuncName = function (fn) {  
  14.         var name = (/\W*function\s+([\w\$]+)\s*\(/).exec(fn);  
  15.         if (!name) {  
  16.             return '(Anonymous)';  
  17.         }        return name[1];  
  18.     };  
  19.    
  20.     var repeat_char = function (len, pad_char) {  
  21.         var str = "";        for (var i=0; i < len; i++) {  
  22.             str += pad_char;  
  23.         }  
  24.         return str;  
  25.     };   
  26.     var formatArray = function (obj, cur_depth, pad_val, pad_char) {  
  27.         if (cur_depth > 0) {  
  28.             cur_depth++;  
  29.         }   
  30.         var base_pad = repeat_char(pad_val*cur_depth, pad_char);  
  31.         var thick_pad = repeat_char(pad_val*(cur_depth+1), pad_char);  
  32.         var str = "";  
  33.          if (typeof obj === 'object' && obj !== null && obj.constructor && getFuncName(obj.constructor) !== 'PHPJS_Resource') {  
  34.             str += "Array\n" + base_pad + "(\n";  
  35.             for (var key in obj) {  
  36.                 if (obj[key] instanceof Array) {  
  37.                     str += thick_pad + "["+key+"] => "+formatArray(obj[key], cur_depth+1, pad_val, pad_char);                } else {  
  38.                     str += thick_pad + "["+key+"] => " + obj[key] + "\n";  
  39.                 }  
  40.             }  
  41.             str += base_pad + ")\n";        } else if (obj === null || obj === undefined) {  
  42.             str = '';  
  43.         } else { // for our "resource" class  
  44.             str = obj.toString();  
  45.         }   
  46.         return str;  
  47.     };  
  48.    
  49.     output = formatArray(array, 0, pad_val, pad_char);   
  50.     if (return_val !== true) {  
  51.         if (d.body) {  
  52.             this.echo(output);  
  53.         }        else {  
  54.             try {  
  55.                 d = XULDocument; // We're in XUL, so appending as plain text won't work; trigger an error out of XUL  
  56.                 this.echo('<pre xmlns="http://www.w3.org/1999/xhtml" style="white-space:pre;">'+output+'</pre>');  
  57.             }            catch (e) {  
  58.                 this.echo(output); // Outputting as plain text may work in some plain XML  
  59.             }  
  60.         }  
  61.         return true;    } else {  
  62.         return output;  
  63.     }  
  64. }  

 

果然是没有做不到的事，只有想不到的事呀。。。（上面的phpjs.org的print_r需要echo方法，请到phpjs.org下载）

Tags: print_r, php

Javascript | 评论:0 | 阅读:23248

娱乐：盛大锦书只要999元？

Submitted by gouki on 2010, August 23, 12:16 PM

终于，盛大今天放出了锦书的价格，多少钱呢？请看图：
大小: 23.92 K 尺寸: 346 x 273 浏览: 1685 次 点击打开新窗口浏览全图
如此说来，那些抢先锦书的朋友就真的是欲哭无泪了。首先花了998，其次，还往帐户里充值50元。算下来比正式版还贵啊。

事实上，我本来是准备买的，但由于群友的实际案例，我放弃了。锦书我想着，使用android系统，对于一些PDF之类的，应该支持也是不错的呀。但事实上锦书却是只支持自己的格式，其他所谓的支持是用软件把它们转换成盛大的格式（转换速度慢，兼容性差，遇到有图片的PDF等还不支持）

一下子，心就哇凉哇凉的。幸好，我没有买，否则看到这个价格，我的心更加凉了。

Tags: 盛大, 锦书

Misc | 评论:0 | 阅读:16769

javascript模版系统

Submitted by gouki on 2010, August 22, 11:32 PM

用javascript做模版的话，说来也算是比较方便的，特别是对于PHP开发来说，只要扔一个json数组过来。然后剩下的就可以让javascript来完成了。
搜索一下jQuery的plugin，可以找到大约5~6个模版程序。好象用的比较多的还是jTemplate，上一次司徒正美用javascript写了一个简单的例子，这次又写了一个比较详细的，说是v2，有兴趣的朋友可以尝试一下。。
--start--司徒正美认为模版要处理复杂的玩意，所以写的功能就强大了。
本版本主要是对原模板系统进行提速，去掉消耗巨大的辅助函数。本来想用它与John Resig的 Micro-Templating比较一下速度，发现对方无法处理复杂的模板，残念。

JavaScript代码
  1. //司徒正美 javascript template - http://www.cnblogs.com/rubylouvre/ - MIT Licensed  
  2.      (function () {  
  3.                if(!String.prototype.trim){  
  4.                    String.prototype.trim = function(str) {  
  5.                        return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');  
  6.                    }  
  7.                }  
  8.                var dom = {  
  9.                    quote: function (str) {  
  10.                        str = str.replace(/[\x00-\x1f\\]/g, function (chr) {  
  11.                            var special = metaObject[chr];  
  12.                            return special ? special : '\\u' + ('0000' + chr.charCodeAt(0).toString(16)).slice(-4)  
  13.                        });  
  14.                        return '"' + str.replace(/"/g, '\\"') + '"';  
  15.                    }  
  16.                },  
  17.                metaObject = {  
  18.                    '\b': '\\b',  
  19.                    '\t': '\\t',  
  20.                    '\n': '\\n',  
  21.                    '\f': '\\f',  
  22.                    '\r': '\\r',  
  23.                    '\\': '\\\\' 
  24.                }, 
  25.                parser = document.createElement("div"), 
  26.                startOfHTML = "\t__views.push(", 
  27.                endOfHTML = ");\n"; 
  28.            
  29.                //onsite，可选，Boolean，是否就地替换掉模板容器，默认true，如果为false，则返回一个文档碎片，交由用户自己插入到需要的地方 
  30.                dom.ejs = function (obj) { 
  31.                    var onsite = obj.onsite === void 0 , 
  32.                    left = obj.left || "<%", 
  33.                    right =obj.right || "%>", 
  34.                    selector = obj.selector, 
  35.                    isLeft = true, 
  36.                    buff = ["var __views = [];\n"], 
  37.                    fragment = document.createDocumentFragment(), 
  38.                    el = document.getElementById(selector), 
  39.                    ejs = dom.ejs; 
  40.                    if (!el) throw "找不到目标元素"; 
  41.                    var str = el.text.trim(); 
  42.                    if(!ejs[selector]){ 
  43.                        while(str.length){ 
  44.                            var condition = isLeft ? left :right; 
  45.                            var index = str.indexOf(condition); 
  46.                            if(index !== -1){//取左边 
  47.                                var text = str.slice(0,index); 
  48.                                if(isLeft){ 
  49.                                    buff.push(startOfHTML, dom.quote(text.trim()), endOfHTML); 
  50.                                }else{ 
  51.                                    switch (text.charAt(0)) { 
  52.                                        case "#"://处理注释 
  53.                                            break; 
  54.                                        case "="://处理后台返回的变量（输出到页面的); 
  55.                                            buff.push(startOfHTML, text.slice(1), endOfHTML) 
  56.                                            break; 
  57.                                        default: 
  58.                                            buff.push(text, "\n") 
  59.                                    }; 
  60.                                } 
  61.                            }else{ 
  62.                                if(isLeft){ 
  63.                                    buff.push(startOfHTML, dom.quote(str), endOfHTML); 
  64.                                    break; 
  65.                                }else{ 
  66.                                    throw "在字符串{{ "+dom.quote(str)+" }}中找不到右界定符"+right 
  67.                                } 
  68.                            } 
  69.                            str = str.slice(index+2).trim(); 
  70.                            isLeft = !isLeft; 
  71.                        } 
  72.                        ejs[selector] = new Function("json", "with(json){"+buff.join("") + '};return __views.join("");')  
  73.                    }  
  74.                    parser.innerHTML = ejs[selector](obj.json || {});  
  75.                    while (parser.firstChild) {  
  76.                        fragment.appendChild(parser.firstChild)  
  77.                    }  
  78.                    return onsite ? el.parentNode.replaceChild(fragment, el) : fragment;  
  79.                };  
  80.                window.dom = dom;  
  81.   
  82.            })();  

这种使用原生代码写的例子，可以被任何代码所使用，如果你有兴趣也可以看看司徒正美的例子的。原文网址在javascript 模板系统 ejs v2，可以移步一观。

Tags: jquery, template, 模版, 模板

Javascript | 评论:0 | 阅读:20346

Records:3106«‹330331332333334335336337338339›»