首先需要下載jqplot需要的js與css文件，我已近打包好了，需要的可以下載

接下來導入其中關鍵的js與css如下，

<link href="css/jquery.jqplot.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.jqplot.min.js"></script>
<script src="js/jqplot.canvasTextRenderer.js"></script>
<
 
script src="js/jqplot.canvasAxisLabelRenderer.js"></script>

html部分

<div id="chart" style="width:500px;height:300px;" ></div>  這裏註意其中的id與之後js的$.jqplot(‘chart‘,data,option)中的第一個參數對應即可

js部分

$(function () {
    var cosPoints = [];
        for (var i=0; i<2*Math.PI; i+=0.4){ 
        cosPoints.push([i, 
 
2.5 + Math.pow(i/4, 2)]); 
    }
    $.jqplot(‘chart‘, [[1,3,4,5,6],[5,6,8,9,12],[3,6,7,8,9],cosPoints], {//$.jqplot(‘chart‘,data,option); target：要顯示的位置。data：顯示的數據。options：其它配置
    stackSeries: false, // 如果置為true並且有多個分類（如果是折線圖，就必須多於一條折線）， 那麽每個分類（折線）在縱軸上的值為其前所有分類縱軸值總和與其縱，軸值相加值（eg,當前分類縱軸值為Y3
    title: ‘我的折線圖‘, 
    axes: {
        xaxis: {
         label: 
 
‘X軸‘, //指定X軸的說明文字
         pad:0
        },
        yaxis: {
         label: ‘Y軸‘,  
         pad:0
        }
    },
    series:[
                {
                    lineWidth: 3, //指定折線的寬度
                    markerOptions: { style: "dimaond" } //指定折線的樣式
                },
                {
                    //showLine: false, //指定是否顯示線條
                    markerOptions: { size: 5, style: "circle" } //size設置每個節點的大小
                },
                {
                    markerOptions: { style: "filledSquare" }
                },
                {
                    showMarker:false
                }　　//分別對應4條線
            ],

    grid: {  
        gridLineColor: ‘#978887‘    // 設置整個圖標區域網格背景線的顏色  
    }
});
});

其中關鍵的我在代碼中已近說明了，需要代碼的小夥伴可以自行下載

鏈接：http://pan.baidu.com/s/1pKIX41d 密碼：2as7

前端通過jqplot繪制折線圖