jQuery Visualize

jQuery Visualize Plugin 簡介信息

Visualize是一個利用HTML5 Canvas將Tables標籤轉換成圖表的jQuery插件。支持的圖表類型包括:線狀圖,柱狀圖,餅狀圖。可以設置圖表標題,高度/寬度,顏色等。

下載:http://download.csdn.net/detail/huangyan92/8795415

示例:


<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Demo page</title>    
        <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/>
        <link type="text/css" rel="stylesheet" href="demopage.css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->
        <script type="text/javascript" src="visualize.jQuery.js"></script>
        <script type="text/javascript">
            $(function(){
                //make some charts
                $('table').visualize({type: 'pie', pieMargin: 10, title: '2009 Total Sales by Individual'});   
                $('table').visualize({type: 'line'});
                $('table').visualize({type: 'area'});
                $('table').visualize();
            });
        </script>
    </head>
    <body>  

        <table >
            <caption>2009 Individual Sales by Category</caption>
            <thead>
                <tr>
                    <td></td>
                    <th>food</th>
                    <th>auto</th>
                    <th>household</th>
                    <th>furniture</th>
                    <th>kitchen</th>
                    <th>bath</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Mary</th>
                    <td>150</td>
                    <td>160</td>
                    <td>40</td>
                    <td>120</td>
                    <td>30</td>
                    <td>70</td>
                </tr>
                <tr>
                    <th>Tom</th>
                    <td>3</td>
                    <td>40</td>
                    <td>30</td>
                    <td>45</td>
                    <td>35</td>
                    <td>49</td>
                </tr>
                <tr>
                    <th>Brad</th>
                    <td>10</td>
                    <td>180</td>
                    <td>10</td>
                    <td>85</td>
                    <td>25</td>
                    <td>79</td>
                </tr>
                <tr>
                    <th>Kate</th>
                    <td>40</td>
                    <td>80</td>
                    <td>90</td>
                    <td>25</td>
                    <td>15</td>
                    <td>119</td>
                </tr>       
            </tbody>
        </table>
    </body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章