2010年7月19日 星期一

使用 jqPlot 畫圓餅圖

在網頁上想要製作圓餅圖，免費且好看的，推薦一家：jqPlot。

實際使用後，發現 jqPlot 操作上並沒有很複雜，程式碼也相當簡潔。

看看這次實作的步驟：

首先是一堆引用的語法。

//針對 IE 瀏覽器而另外處理 （excanvas）
<!--[if IE]><script language="javascript" type="text/javascript" src="../js/excanvas.min.js"></script><![endif]--> 

<link rel="stylesheet" type="text/css" href="../css/jquery.jqplot.css" /> 

<!-- BEGIN: load jquery --> 
<script language="javascript" type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> 
<!-- END: load jquery --> 

<!-- BEGIN: load jqplot --> 
<script language="javascript" type="text/javascript" src="../js/jquery.jqplot.min.js"></script> 
<script language="javascript" type="text/javascript" src="../js/jqplot.pieRenderer.min.js"></script> 
<script language="javascript" type="text/javascript" src="../js/jqplot.trendline.min.js"></script> 

<!-- END: load jqplot -->

接著，在頁面上放置要呈現圖形的範圍：
<div id="pie" style="margin-top:20px; margin-left:20px; width:500px; height:500px;"></div>

最後，設定圖形資料的內容：
<script>$(document).ready(function(){   
  $.jqplot.config.enablePlugins = true; 
   plot1 = $.jqplot(
     'pie',
     [[['paladin(30)',30],['polly(28)',28],['hugo(35)',35],['keen(25)',25]]],
     { 
       seriesDefaults:{renderer:$.jqplot.PieRenderer, trendline:{show:true},rendererOptions:{sliceMargin:8},rendererOptions:{sliceMargin:8} },legend:{show:true} 
     }); 
 }); 
</script>

而完成後的作品如下：
觀看完成的作品後，如果你進一步希望將右上角的詳細資訊能有個連結的功能，則可以進一步去改寫圖形資料內容。譬如說，「paladin 」的資料，是由：['paladin(30)',30] 而來，而可以改寫成['<a href="#" onclick=DoLink("paladin")>paladin(30)</a>',30]，如此，詳細資料裡面的 paladin 就可以支援點選功能了。此外只需要加上自行定義 的 DoLink。
<script>function DoLink(strName){alert(strName);}</script>


官網：http://www.jqplot.com/index.php
張貼者： 李志堅 於 7/19/2010 11:46:00 上午 3 意見
標籤：

2010年7月13日 星期二

線上編輯照片( pixlr )

如果 windows 的小畫家不能滿足你，但又不想裝其他影像編輯軟體，可以試試這線上編輯軟體 http://pixlr.com/editor/ 。

點進去後，可以在 Language 切換語系，包含繁體中文。您可以上傳想要編輯的相片，並透過 pixlr 所提供的影像編輯功能盡情的揮灑一番，至於最後要儲存結果，也是沒問題，他可以讓你把自己的作品下載回去。

自己不用額外安裝軟體就可以直接編輯相片，真的蠻方便的。



參考 :

01. 用雲端影像軟體幹掉Photoshop、ACDSee
02. http://pixlr.com/editor/
張貼者： 李志堅 於 7/13/2010 06:27:00 下午 1 意見
標籤：

2010年7月8日 星期四

IE 不支援 array.indexOf

今天在一篇介紹 JavaScript: array.indexOf 的文章，將他的程式碼下載執行一下，發現奇怪的問題，在 Chreom & FireFox 都可以正常執行，唯獨 IE 不可以。後來拜讀了 Colin Pear 的文章後，順利找到解法。

日後如果要使用 array.indexOf ，要在呼叫前，先引用一段來處理支援各家瀏覽器的方法：

if(!Array.indexOf){
  Array.prototype.indexOf = function(obj){
   for(var i=0; i<this.length; i++){
 if(this[i]==obj){
  return i;
 }
   }
   return -1;
  }
}

完整範例：

<html>
    <head><h1>JavaScript Array indexof </h1>
        <title>JavaScript array indexof </title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <script language="javascript" type="text/javascript">
            var array=new Array();
            array[0]="Rose";
            array[1]="India";
            array[2]=".net";
            array[3]="Rohini";
            document.write("<b>"+"Element in the array are "+"</b>"+ "<br />");
            document.write("================="+ "<br />");
            for(var i=0;i<array.length;i++){
                document.write(array[i]+"<br>")
            }
            document.write("================="+ "<br />");


   if(!Array.indexOf){
     Array.prototype.indexOf = function(obj){
      for(var i=0; i<this.length; i++){
    if(this[i]==obj){
     return i;
    }
      }
      return -1;
     }
   }


            var index = array.indexOf("India");
            document.write("<b>"+"Index of India on the array is: "+"</b>"+index);
        </script> 
    </body>
</html>
參考：
http://www.roseindia.net/java/javascript-array/javascript-array-index-of.shtml
http://www.pearweb.com/javascript/array-index-of.html
張貼者： 李志堅 於 7/08/2010 02:11:00 下午 0 意見
標籤：

Google Docs Demo 真正即時的多人線上編輯功能

不知道大家對於多人編輯的環境需求機會多不多？如果你需要與許多人同時編輯一份文件時，在乎的應該是所謂的「即時性」，希望能夠越快看到別人所回應的訊息越方便。而 Google 也提供了一個簡單的共同文件「即時」編輯功能。

可以連結到 http://docs.google.com/demo


然後 Google Docs 會自動在網址後面加上他定義的編號，用來識別你目前正在編輯的這份文件。如果你希望你的朋友也可以一同編輯這份文件，那只需要將「Invite others to try this with you just by sharing this link」下方的 URL 分享給你的朋友，那大家就可以共同編輯了。

有一個需要注意的，就是這份共同編輯文件，存活時間只有 24 小時，時間到了之後，就會自動消失，所以你有保存的需求，則自己要另外去儲存這份文件就是了。
張貼者： 李志堅 於 7/08/2010 10:19:00 上午 0 意見
標籤：

2010年7月1日 星期四

Session 遺失的狀況之一：ShowModalDialog之後，不能用window.open來開窗

在美麗的 selene 同事部落格，看到一篇有關於 session 遺失的探討，其中引用了 「javascript 的showModalDialog與window.open造成session遺失的問題」文章，進行了 showModalDialog 與 window.open 混搭使用的測試，自己覺得蠻有趣的。並非這兩者不能並存使用，但要記得，ShowModalDialog之後如果再用window.open來開窗，你的 session 值就會不見，這真不知是什麼怪邏輯，但自己還真的傻傻全部演練一遍，但都有準哩。日後如有使用 session 在存東西，這點可能就要好好注意一下了。

參考：
01. Session Issues from selene
02. javascript 的showModalDialog與window.open造成session遺失的問題
張貼者： 李志堅 於 7/01/2010 08:47:00 下午 0 意見
標籤：
訂閱： 文章 (Atom)