返回顶部

收藏

利用 jquery flot 生成柱状图

更多

具体效果:

代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <title></title>  
        <script type='text/javascript' src="jquery-1.8.3.js" ></script>    

        <script type="text/javascript" src="jquery.flot.js"></script>      

        <script type="text/javascript">  

    $(function () {  
        var d1 = [   
                    { label: "Bar", data: [ [1, 13], [2, 11], [3, 7] ] }  
                ];  

        var stack = 0, bars = true, lines = false, steps = false;  

        $.plot($("#bar1"), d1, {  
            series: {         
                color: '#333',  
                abel: 'morris',  
                stack: 0,  
                lines: {   
                    //show: true,   
                    fill: true,   
                    steps: false   
                },  
                point: {  
                    show: true,  
                },  
                bars: {   
                    show: true,   
                    barWidth: 0.6  
                }  
            }  
        });   
    });  

    $(function(){  

        var d1 = [   
                    { label: "Bar1", data: [ [0,14], [1, 13], [2, 11], [3, 7] ] ,color: '#abcdef' },  
                    { label: "Bar2", data: [ [0,8], [1, 22], [2, 33], [3, 11] ] , color: '#fedcba'}  
                ];  
        $.plot($("#bar2"), d1, {  
               series: {  
                    bars: {  
                        show: true  
                    }  
                },  
                bars: {  
                    align: "center",  
                    barWidth: 0.5  
                },  
                xaxis: {  
                    show: true,  
                    //position: 'left',  
                    //color: '#ccc',  
                    //tickColor: '#fff',  
                    ticks: [[0,'a'],[1,'b'],[2,'c'],[3,'d']],  
                    tickSize: 2,  
                    axisLabelUseCanvas: true,  
                    axisLabelFontSizePixels: 12,  
                    axisLabelFontFamily: 'Verdana, Arial',  
                    axisLabelPadding: 10  

                },  
            });  

    });  

    $(function(){  

        var d1 = [   
                    { label: "Bar1", data: [ [10, 0], [11, 1], [12, 2], [13, 3] ] ,color: '#abcdef' },  
                    { label: "Bar2", data: [ [13,0], [12, 1], [11, 2], [10, 3] ] , color: '#fedcba'}  
                ];  
        $.plot($("#bar3"), d1, {  
               series: {  
                    bars: {  
                        show: true  
                    }  
                },  
                bars: {  
                    align: "center",  
                    barWidth: 0.5,  
                    horizontal: true,  
                },  
                xaxis: {  
                    show: true,  
                    tickSize: 2,  
                    axisLabelUseCanvas: true,  
                    axisLabelFontSizePixels: 12,  
                    axisLabelFontFamily: 'Verdana, Arial',  
                    axisLabelPadding: 10  

                },  
                yaxis: {  
                    show: true,  
                    ticks: [[0,'a'],[1,'b'],[2,'c'],[3,'d']],  
                    tickSize: 2,  
                    axisLabelUseCanvas: true,  
                    axisLabelFontSizePixels: 12,  
                    axisLabelFontFamily: 'Verdana, Arial',  
                    axisLabelPadding: 10  

                },  
            });  

    });  

        </script>  
    </head>  
    <body>  

        <div style="width:300px;height:300px;text-align:center;margin:10px">          
            <div id="bar1" style="width:100%;height:100%;"></div>          
        </div>  

        <div style="width:300px;height:300px;text-align:center;margin:10px">          
            <div id="bar2" style="width:100%;height:100%;"></div>          
        </div>  

        <div style="width:300px;height:300px;text-align:center;margin:10px">          
            <div id="bar3" style="width:100%;height:100%;"></div>          
        </div>  
    </body>  
    </html>  

标签:javascript

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. K-Res 发表 2018-10-27 12:10:11 关于Javascript中类成员函数中内嵌函数的this闭包问题
  2. 杨魁 发表 2018-10-25 07:28:13 Under the Hood: NaN of JS
  3. 尖兵 发表 2018-10-25 11:03:47 服务重启导致的Java服务抖动CPU占用高
  4. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  5. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  6. wenming.gapo 发表 2018-10-23 11:32:30 AOP装饰函数与小T的情愫(二)
  7. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  8. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  9. hellas 发表 2018-10-18 14:20:31 AOP装饰函数与小T的情愫
  10. 博主 发表 2018-10-15 10:02:38 生成聚合收款二维码:支付宝、微信、QQ 钱包
  11. axiu 发表 2018-10-14 02:30:40 微信小程序开发总结
  12. xirruiqiang 发表 2018-10-14 08:14:43 round 函数在不同语言中的实现乱象

发表评论