jQuery Google Charts----一個封裝google chart api的jquery插件

Google Charts想必大家都已經耳熟能詳了吧，它允許我們很輕松的通過簡單的數據就能生成復雜的圖表.而Jgcharts插件就是對這個api的封裝，讓我們調用google api更加容易.廢話不多說，先來看看效果:

柱狀圖:

折線圖:

餅圖:

3d餅圖:

這個插件只需要在頭部引入：

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jgcharts.js" type="text/javascript"></script>

 

這個插件的原理是根據拼接的url，Google 圖表 API 會返回一幅 PNG 格式的圖片來響應一個網址。可以生成多種類型的圖片，包括折線圖、條形圖和餅圖。您可以為每種圖片類型指定屬性，例如大小、顏色和標簽。

通過將網址嵌入 <img> 標簽內，您可以將圖表 API 圖片包括在網頁中。當網頁在瀏覽器中顯示時，圖表 API 會呈現該網頁中的這幅圖片。

具體可以參考:http://code.google.com/intl/zh-CN/apis/chart/

 

這jgchart插件則可以幫助你動態的拼接這個url傳遞給google.

示例代碼如下:

var api = new jGCharts.Api(); 
jQuery('<img>') 
.attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]})) 
.appendTo("#bar1");

這就是最上面那個餅狀圖的生成方法,只需要生成jGCharts.api的實例並通過make方法來返回拼接好的字符串.通過data屬性可以設置圖表的數據，以js數組的方式進行.

我們還可以通過make內參數對象的type屬性來設置不同的圖表類型，比如折線圖可以加上:“type : lc”來獲取.

 

jGChart插件和Demo可以從這里獲得:http://www.maxb.net/scripts/jgcharts/include/demo/

 

下面是我自己做的一個小Demo來對獲得的圖表進行簡單的模擬:

 

 

第一個數字:  
第二個數字:
 
      餅圖       折線圖       柱狀圖       3d餅圖       橫向柱狀圖        

你可以加入相應的數字並且點擊生成圖表來進行模擬.也可以使用清空數據來將剛加入的數據清空.

上面Demo的代碼如下:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://files.cnblogs.com/CareySon/jgcharts.pack.js" type="text/javascript"></script>
    <div style="border:1px dashed green; margin:30px 10px;">
    <div id="result"></div>
    <div id="bar1"></div>
    第一個數字:<input id="no1" />
    <br />
    第二個數字:<input id="no2" /><br />
    <input type="button" value="加入數據" id="add"/><input type="button" value="清空數據" id="clear" />
    <br />
    <select id="t">
    <option value="p">餅圖</option>
    <option value="lc">折線圖</option>
    <option value="">柱狀圖</option>
    <option value="p3">3d餅圖</option>
    <option value="bhg">橫向柱狀圖</option>
    </select>
    <br />
    <input type="button" value="生成圖表" id="submitx" />
    <script type="text/javascript">
        var dataArray = new Array();
        $("#add").click(function() {
            var temp = new Array();
            temp.push($("#no1").val());
            temp.push($("#no2").val());

            dataArray.push(temp);
            $("#result").append("數據加入成功,數據為:" + $("#no1").val() + "," + $("#no2").val()+"<br />");
            temp = null;
            $("#no1")[0].value = "";
            $("#no2")[0].value = "";

        });
        $("#clear").click(function() {
            dataArray = new Array();
            $("#result").html("");
            $("#bar1").html("");

        });
        $("#submitx").click(function() {
        $("#bar1").html("");
            var api = new jGCharts.Api();
            var xdata = "[";
            for (i = 0; i < dataArray.length; i++) {
                xdata += "[";
                for (j = 0; j < dataArray[i].length; j++) {

                    xdata += dataArray[i][j];
                    xdata += ",";
                }
                xdata = xdata.slice(0, xdata.length - 1);
                xdata += "]";
                xdata += ",";
            }
            xdata = xdata.slice(0, xdata.length - 1);
            xdata += "]";
            jQuery('<img>').attr('src', api.make({ data:eval(xdata),type:$("#t").val() })).appendTo("#bar1");
        });
        
    </script>
    </div>