返回顶部

收藏

利用 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. Leon 发表 2018-03-28 14:10:00 本地使用js或jquery操作cookie在谷歌浏览器chrome中不生效
  2. 博主 发表 2017-11-05 11:42:25 原生 Javascript 编写五子棋
  3. 博主 发表 2017-11-01 15:24:51 原生 Javascript 编写俄罗斯方块
  4. 博主 发表 2017-09-28 01:50:55 jQuery 性能优化技巧
  5. 博主 发表 2017-11-05 11:42:39 原生 Javascript 编写贪吃蛇
  6. darida 发表 2018-03-25 14:51:31 文件预览 kkFileView v1.1 新增多媒体预览支持等
  7. Jiavan 发表 2016-03-05 12:06:00 ES中理解原型以及对象创建方式
  8. Jiavan 发表 2016-03-18 08:58:00 Javascript模块化编程及编写加载遵循AMD规范的代码
  9. Jiavan 发表 2016-03-24 12:11:00 JS事件分层及性能优化
  10. Jiavan 发表 2016-04-03 18:22:00 浅析JS中的自定义事件
  11. Jiavan 发表 2016-08-21 08:43:00 浅谈Flux架构及Redux实践
  12. Jiavan 发表 2016-08-26 03:26:00 Redux中间件与异步Action

发表评论