zoukankan      html  css  js  c++  java
  • jQuery插件Flot实战Demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery-flot插件数据可视化显示</title>
        <link rel="stylesheet" href="../css/blue.css" media="screen" />
        <script src="../jquery-1.10.2.min.js"></script>
        <script src="../jquery.flot.v081.js"></script>
        <!--[if IE]>
        <script src="../excanvas.js"></script>
        <![endif]-->
        <style type="text/css">
        body{font-family: Arial,Helvetica,sans-serif;}
        /*table{border-collapse: collapse; 100%;}
        caption{font-weight: bold;font-size: 16px;color: #61b1ee;margin-bottom: 6px;}
        td,th{padding: 5px;border:1px solid #aaa;text-align: center;}*/
        .legend td,.legend th{padding: 2px;border: 0;}
        #wrapper>h1{padding: 0.4em 0;}
        </style>
    </head>
    <body>
        <div id="wrapper">
            <h1>jQuery Playground</h1>
            <ul id="nav">
                <li><a href="index.html" class="current">可视化显示统计数据</a></li>
                <li><a href="#">使用flot插件</a></li>
            </ul>
            <div id="content">
                <h2>可视化显示统计数据——折线图</h2>
                <div id="dataarea">
                    <!-- <table>
                        <caption>站点访问人数统计表</caption>
                        <tbody>
                            <tr>
                                <td></td>
                                <th>8点</th>
                                <th>9点</th>
                                <th>10点</th>
                                <th>11点</th>
                                <th>12点</th>
                            </tr>
                            <tr>
                                <th>站点A</th>
                                <td>560</td>
                                <td>900</td>
                                <td>1200</td>
                                <td>1400</td>
                                <td>1500</td>
                            </tr>
                            <tr>
                                <th>站点B</th>
                                <td>620</td>
                                <td>1200</td>
                                <td>1000</td>
                                <td>1500</td>
                                <td>1450</td>
                            </tr>
                            <tr>
                                <th>站点C</th>
                                <td>420</td>
                                <td>1300</td>
                                <td>1800</td>
                                <td>1550</td>
                                <td>1600</td>
                            </tr>
                            <tr>
                                <th>站点D</th>
                                <td>300</td>
                                <td>600</td>
                                <td>1300</td>
                                <td>1600</td>
                                <td>1800</td>
                            </tr>
                        </tbody>
                    </table> -->
                </div>
            </div>
            <div id="footer">Powered By Dennis Ji.</div>
        </div>
    </body>
    <script type="text/javascript">
    $(function(){
        var data = [
        {
            label:"站点A",
            data:[
            [12,1500],
            [11,1400],
            [10,1200],
            [9,900],
            [8,560]
            ]
        },
        {
            label:"站点B",
            data:[
            [12,1450],
            [11,1500],
            [10,1000],
            [9,1200],
            [8,620]
            ]
        },
        {
            label:"站点C",
            data:[
            [12,1600],
            [11,1550],
            [10,1800],
            [9,1300],
            [8,420]
            ]
        },
        {
            label:"站点D",
            data:[
            [12,1800],
            [11,1600],
            [10,1300],
            [9,600],
            [8,300]
            ]
        }
        ];
        var options = {
            legend:{
                show:true,
                labelFormatter:null,
                margin:10,//[x,y]标签的margin值的x,y定位
                position:"ne",//标签的定位"ne"(默认是ne):是top-right,"nw":是top-left,"se":是bottom-right,"sw":是bottom-left,
                // labelBoxBorderColor:"#dbf5ab",//标签对象边框色
                // backgroundColor:"#dbf5ab",//标签对象背景色
                backgroundOpacity:0.5//标签对象背景色透明度设置
            },
            points:{
                show:true,
                radius:3
            },
            lines:{
                show:true
            },
            grid:{
                hoverable:true,
                clickable:true
            }
        };
        //获取显示区域
        var $dataarea = $("#dataarea");
        $dataarea.css("width","600px");
        $dataarea.css("height","300px");
        $.plot(dataarea,data,options);
        function showTooltip(x,y,contents){
            $('<div id="tooltip">'+contents+'</div>').css({
                position:'absolute',
                display:'none',
                top:y+5,//用到参数y
                left:x+5,//用到参数x
                border:'1px solid #fdd',
                padding:'2px',
                'background-color':'#fee',
                opacity:0.8
            }).appendTo("body").fadeIn(200);
        }
        var previouspoint = null;
        $dataarea.bind('plothover',function(e,pos,item){
            if (item) {
                if (previouspoint != item.datapoint) {
                    previouspoint = item.datapoint;
                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);
                    showTooltip(item.pageX,item.pageY,item.series.label+":"+x+"点访问人数:"+y);
                }
            } else{//否则删除提示层,清空当前点标记
                $("#tooltip").remove();
                previouspoint = null;
            };
        });
    });
    </script>
    </html>

  • 相关阅读:
    jquery toggle(listenerOdd, listenerEven)
    struts quick start
    hdu 1518 Square (dfs)
    hdu 2544 最短路 (最短路径)
    hdu 1754 I Hate It (线段树)
    hdu 1856 More is better (并查集)
    hdu 1358 Period (KMP)
    hdu 2616 Kill the monster (DFS)
    hdu 2579 Dating with girls(2) (bfs)
    zoj 2110 Tempter of the Bone (dfs)
  • 原文地址:https://www.cnblogs.com/koleyang/p/4819774.html
Copyright © 2011-2022 走看看