English | 正體中文 | 简体中文

图表图例

要让Flot显示图例, 在资料来源里要先设定label属性
//此图表可以显示图例
$.plot($("#flotcontainer"), 
       [
         {label: "data1", data: dataset1},
         {label: "data2", data: dataset2},
         {label: "data3", data: dataset3}
       ]);  

//此图表无法显示图例, 因为没有设定label属性
$.plot($("#flotcontainer"), 
       [
         {data: dataset1},
         {data: dataset2},
         {data: dataset3}
       ]);

含有图例的折线图

范例程式码Expand
<!-- HTML -->
<div id="example-section20">    
    <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);

    $.plot($("#example-section20 #flotcontainer"),
        [
            {label:"data1", data:data1},
            {label:"data2", data:data2},
            {label:"data3", data:data3}
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            }      
        }
    );
});
</script>
在线测试程序


含有图例的直条图

范例程式码Expand
<!-- HTML -->
<div id="example-section21">    
    <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 src="http://www.pureexample.com/js/flot/jquery.flot.stack.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 = {
        series: {
            stack:true,
            bars: {
                show: true
            }
        }
    };

    $.plot($("#example-section21 #flotcontainer"),     
        [
            {label:"data1", data:data1},
            {label:"data2", data:data2},
            {label:"data3", data:data3}
        ]
        , options);
});
</script>
在线测试程序

含有图例的圆饼图

范例程式码Expand
<!-- HTML -->
<div id="example-section22">    
    <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 src="http://www.pureexample.com/js/flot/jquery.flot.stack.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.pie.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 options = {
            series: {
                pie: {
                    show: true,
                    
                    tilt: 0.5
                }
		    }
         };
    
    var data = [
        {label: "data1", data:GenerateSeries(0)},
        {label: "data2", data:GenerateSeries(0)},
        {label: "data3", data:GenerateSeries(0)},
        {label: "data4", data:GenerateSeries(0)},
        {label: "data5", data:GenerateSeries(0)},
        {label: "data6", data:GenerateSeries(0)}
    ];

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




更多范例
 
© 2012 PureExample.com contact