English | 正體中文 | 简体中文

基本折线图

简易的折线图

程式码Expand
<!-- HTML -->
<div id="example-section3">
    <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 data1 = [
    [10, 10], [20, 15], [30, 22], [40, 18], [50, 50], [60, 10],
    [70, 10], [80, 15], [90, 22], [100, 18], [110, 50], [120, 10],
    [130, 10], [140, 15], [150, 22], [160, 18], [170, 50], [180, 10],
    [190, 10], [200, 15], [210, 22], [220, 18], [230, 50], [240, 10]
];

$(document).ready(function(){	
    $.plot($("#example-section3 #flotcontainer"), [
        {
            data: data1,
            lines: { show: true}
        }
    ]);

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

含有图例的折线图

如果你想把图例加到图表上, 你必须在series设定label属性
//如果不设定label, 图例就无法显示
$.plot(placeholder,
     [
      {data: dataLarge1}
     ]
);
//设定为label属性后, 图例就可以显示
$.plot(placeholder,
     [
      {label: 'data1', data: dataLarge1}
     ]
);

含有图例且有多个资料来源的折线图

程式码Expand
<!-- HTML -->
<div id="example-section4">
    <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">
function generateSeries(added){
    var data = [];
    var start = 100 + added;
    var end = 200 + added;

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

    return data;
}

$(document).ready(function(){	
    var dataLarge1 = generateSeries(0);
    var dataLarge2 = generateSeries(300);  
    
    $.plot($("#example-section4 #flotcontainer"),
        [
            {label: "data1", data: dataLarge1},
            {label: "data2", data: dataLarge2}
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            },
            xaxis: {
                ticks: 20
            },
            yaxis: {
                ticks: 10
            }
        }
    );

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

更多范例
 
© 2012 PureExample.com contact