English | 正體中文 | 简体中文

基本区域图

绘制区域图其实很简单, 只要先把折线图画出来后, 再设定fill属性为true即可
series:{
    lines: { fill: true }
}

区域图

程式码Expand
<!-- HTML -->
<div id="example-section11">
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: center; margin:0 auto;">
    </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">
var data11_1 = [
    [1354586000000, 153], [1364587000000, 658], [1374588000000, 198],
    [1384589000000, 663], [1394590000000, 801], [1404591000000, 1080],
    [1414592000000, 353], [1424593000000, 749], [1434594000000, 523],
    [1444595000000, 258], [1454596000000, 688], [1464597000000, 364]
];

var data11_2 = [
    [1354586000000, 53], [1364587000000, 65], [1374588000000, 98],
    [1384589000000, 83], [1394590000000, 980], [1404591000000, 808],
    [1414592000000, 720], [1424593000000, 674], [1434594000000, 23],
    [1444595000000, 79], [1454596000000, 88], [1464597000000, 36]
];

$(function () {    
    var options = {
            series:{
                lines: {                         
                    fill: true
                }
            },
            xaxis: {
                mode: "time"
            },
            grid:{
                backgroundColor: { colors: ["#969696", "#5C5C5C"] }
            }
    };

    var plot = $.plot($("#example-section11 #flotcontainer"), [data11_1, data11_2], options);  
});
</script>
在线测试程序

更多范例
 
© 2012 PureExample.com contact