English | 正體中文 | 简体中文

自订图例

Flot提供了多种属性来设定图例
legend: {
    show: boolean  
    //显示或隐藏图例
    labelFormatter: null or (fn: string, series object -> string)
    //可自行程式化定义你要的图例资料
    labelBoxBorderColor: color
    //图例边框颜色
    noColumns: number
    //设定图例要以几行显示
    position: "ne" or "nw" or "se" or "sw"    
    //图例位置 (north east, north west, south east, south west)
    margin: number of pixels or [x margin, y margin]
    backgroundColor: null or color
    backgroundOpacity: number between 0 and 1
    container: null or jQuery object/DOM element/jQuery expression        
}

自订图例位置范例图表

选择图例位置 : North East  North West  South East  South West

范例程式码Expand
<!-- HTML -->
<div id="example-section23">    
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: left;"></div>    
    <br>
        Legend Position : <input id="r1" checked name="R1" type="radio" value="ne" />North East&nbsp;
        <input id="r2" name="R1" type="radio" value="nw" />North West&nbsp;
        <input id="r3" name="R1" type="radio" value="se" />South East&nbsp;
        <input id="r4" name="R1" type="radio" value="sw" />South West
    
</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 () { 
    function GenerateSeries(added){
        var data = [];
        var start = 100 + added;
        var end = 500 + 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 data1 = GenerateSeries(0);
    var data2 = GenerateSeries(10);
    var data3 = GenerateSeries(20);
    var pos = "ne";

    var options = {
        legend:{         
            backgroundOpacity: 0.5,
            noColumns: 0,
            backgroundColor: "green",   
            position: pos
        }
    };

    $("#example-section23 input").change(function(){
        $(this).changeposition();
    });

    $.fn.changeposition = function(){        
        pos = $(this).val();

        options = {
            legend:{         
                noColumns: 0,
                backgroundColor: "green",   
                position: pos
            }
        };

        makeChart();       
    };
    
    function makeChart(){
        $.plot($("#example-section23 #flotcontainer"),
            [
                {label:"data1", data:data1},
                {label:"data2", data:data2},
                {label:"data3", data:data3}
            ],
            options
        );
    }

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

自行设定图例位置(可设定在你想要的任何位置)

范例程式码Expand
<!-- HTML -->
<div id="example-section24">        
    <div id="legendContainer" style="background-color:#fff;padding:2px;margin-bottom:8px;border-radius: 3px 3px 3px 3px;border:1px solid #E6E6E6;display:inline-block;margin:0 auto"></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 () { 
    function GenerateSeries(added){
        var data = [];
        var start = 100 + added;
        var end = 500 + 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 data1 = GenerateSeries(0);
    var data2 = GenerateSeries(10);
    var data3 = GenerateSeries(20);

    var options = {
        legend:{         
            container:$("#legendContainer"),            
            noColumns: 0
        },
        grid: {
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
        }    
    };
    
    $.plot($("#example-section24 #flotcontainer"),
        [
            {label:"data1", data:data1},
            {label:"data2", data:data2},
            {label:"data3", data:data3}
        ],
        options
    );
    
});
</script>
在线测试程序




更多范例
 
© 2012 PureExample.com contact