前端通過jqplot繪製折線圖，jqplot繪製折線圖

前端通過jqplot繪製折線圖，jqplot繪製折線圖

首先需要下載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