English | 正體中文 | 简体中文

堆叠区域图

绘制堆叠区域图你需要用到Flot的一个插件程式 'jquery.flot.stack', 你可以在Flot的压缩档里找到.
//记住 'jquery.flot.stack'必须在include'jquery.flot.js'之后才能正常运作

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


堆叠区域图

切换显示资料 : data1 data2 data3

范例程式码Expand
<!-- HTML -->
<div id="example-section12">
    <div id="legendPlaceholder"></div>
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: left;"></div>
    <Br>
    <div>
        Toggle series : <input type="checkbox" id="cbdata1" checked>data1
        <input type="checkbox" id="cbdata2" checked>data2
        <input type="checkbox" id="cbdata3" checked>data3
    </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 src="http://www.pureexample.com/js/flot/jquery.flot.stack.min.js"></script>
<script type="text/javascript">
$(function () {    
    var data1 = GenerateSeries(0);
    var data2 = GenerateSeries(100);
    var data3 = GenerateSeries(200);
    var dataset = [data1, data2, data3];

    function GenerateSeries(added){
        var data = [];
        var start = 100 + added;
        var end = 200 + added;

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

        return data;
    }

    var options = {
            series:{
                stack: true,             
                lines: { fill: true }
            },
            legend: {
                position: 'nw',
                labelBoxBorderColor: "#000000",
                container: $("#example-section12 #legendPlaceholder"),
                noColumns: 0
            }
    };
    
    function ToggleSeries(){
        var d = [];

        $("#example-section12 input").each(function(){
            if($(this).is(":checked")){
                var seqence = $(this).attr("id").replace("cbdata", "");
                d.push({label:"data" + seqence, data: dataset[seqence - 1]});                
            } 
        });

        $.plot($("#example-section12 #flotcontainer"), d, options);  
    }

    $("#example-section12 input").change(function(){
        ToggleSeries();
    });

    ToggleSeries();
    
});
</script>
在线测试程序

更多范例
 
© 2012 PureExample.com contact