English | 正體中文 | 简体中文

基本直条图

直条图

程式码Expand
<!-- HTML -->
<div id="example-section13">
    <div id="legendPlaceholder"></div>
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: left;"></div>    
</div>


<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript">
$(function () {    
    var data1 = GenerateSeries(0);
    
    function GenerateSeries(added){
        var data = [];
        var start = 100 + added;
        var end = 200 + added;

        for(i=1;i<=20;i++){        
            var d = Math.floor(Math.random() * (end - start + 1) + start);        
            data.push([i, d]);
            start++;
            end++;
        }

        return data;
    }

    var options = {
            series:{
                bars:{show: true}
            },
            bars:{
                  barWidth:0.8
            },            
            grid:{
                backgroundColor: { colors: ["#919191", "#141414"] }
            }
    };

    $.plot($("#example-section13 #flotcontainer"), [data1], options);  
    
});
</script>
在线测试程序


横条图

程式码Expand
<!-- HTML -->
<div id="example-section14">
    <div id="legendPlaceholder"></div>
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: left;"></div>    
</div>


<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript">
$(function () {    
    var data1 = [
        [10, 10], [20, 20], [30, 30], [40, 40], [50, 50]
    ];

    var options = {
            series:{
                bars:{show: true}
            },
            bars:{
                horizontal:true,
                barWidth:6
            },
            grid:{
                backgroundColor: { colors: ["#919191", "#141414"] }
            }
    };

    $.plot($("#example-section14 #flotcontainer"), [data1], options);  
    
});
</script>
在线测试程序

更多范例
 
© 2012 PureExample.com contact