flot繪製折線圖

時間 2019-12-08

標籤 flot 繪製折線简体版

原文原文鏈接

<!--請先確保你有jquery.js   和   jquery.flot.min.js-->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>
     <style type="text/css">
        #flot-placeholder{width:350px;height:300px;}       
    </style>
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://www.pureexample.com/js/flot/excanvas.min.js"></script><![endif]-->
    <script type="text/javascript" src="flot/jquery.js"></script>
    <script type="text/javascript" src="flot/jquery.flot.min.js"></script>
    <script type="text/javascript">
        var data = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];
 
        var dataset = [{label: "line1",data: data}];
 
        var options = {//設定選項讓圖表看起來更完整
            series: {
                lines: { show: true },
                points: {
                    radius: 3,
                    show: true
                }
            }
        };
 
        $(document).ready(function () {
            $.plot($("#flot-placeholder"), dataset, options);//呼叫plot函式後把圖表繪製出來
/*
　　　　　　$.plot(placeholder, data, options) 
　　　　　　1. placeholder : 是一個DOM元素, Flot會把圖表插到這個元素之中, 這個元素必需要有指定寬度和高度. 
　　　　　　2. data : 數據數組組, 如上面所提過的數據. 
　　　　　　3. options : 在選項裏能夠設定Flot提供的屬性, 或是改變Flot的外觀、決定繪製何種圖形等. 
*/

        });
    </script>
</head>
<body>
    <div id="flot-placeholder"></div>//指定一個定位點(Placeholder)
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。