jquery jqPlot API 中文使用教程

jqPlot是一個灰常強大的圖表工具，曲線，柱狀，餅圖，應該有盡有，更要命的是，調用方便~~

官網：http://www.jqplot.com/

這裏貢獻上中文教程，基本上全部的api都很齊全，供有須要的童鞋們瞧瞧，更重要的是做爲本身滴收藏~~哦耶耶~

jqPlot整的來講有三個地方須要配置。格式如：
    $.jqplot(‘target’, data, options);target：要顯示的位置。data：顯示的數據。options：其它配置

seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
        "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默認顯示的分類顏色，若是分類的數量超過這裏的顏色數量，則從該隊列中第一個位置開始從新取值賦給相應的分類 
stackSeries: false, // 若是置爲true而且有多個分類（若是是折線圖，就必須多於一條折線）， 那麼每一個分類（折線）在縱軸上的值爲其前全部分類縱軸值總和與其縱，軸值相加值（eg,                   當前分類縱軸值爲Y3
  title: '',     //設置當前圖的標題

    title: {
        text: '',  //設置當前圖的標題
        show: true,//設置當前圖的標題是否顯示
    },

    axesDefaults: {
        show: false,    是否自動顯示座標軸。
        min: null,      橫(縱)軸最小刻度值
        max: null,       橫(縱)軸最大刻度值
        pad: 1.2,       橫(縱)軸度值增漲因子
        ticks: [],     //設置橫（縱）座標的刻度上的值，可爲該ticks數組中的值
        numberTicks: undefined,//一個相除因子，用於設置橫（縱）座標刻度間隔，橫（縱）座標刻度間隔值=橫（縱）座標區間長度/(numberTicks-1)
        renderer: $.jqplot.LinearAxisRenderer,  // 設置橫（縱）軸上數據加載的渲染器
        rendererOptions: {},   // 設置renderer的Option配置對象，線狀圖不須要設置
        tickOptions: {
            mark: 'outside',    // 設置刻度在座標軸上的顯示方式：分爲:座標軸外顯示，內顯示，和穿過顯示;其值分別爲 'outside', 'inside' or 'cross'。
            showMark: true,     //設置是否顯示刻度
            showGridline: true, // 是否在圖表區域顯示刻度值方向的網格
            markSize: 4,      // 每一個刻度線頂點距刻度線在座標軸上點距離（像素爲單位)若是mark值爲 'cross', 那麼每一個刻度線都有上頂點和下頂點，刻度線與座標軸
                               在刻度線中間交叉，那麼這時這個距離×2
            show: true,         //是否顯示刻度線，與刻度線同方向的網格線，以及座標軸上的刻度值
            showLabel: true,    //是否顯示刻度線以及座標軸上的刻度值
            formatString: '',   //設置座標軸上刻度值顯示格式，eg:'%b %#d, %Y'表示格式"月 日，年"，"AUG 30,2008"
         fontSize:'10px',    //刻度值的字體大小 
            fontFamily:'Tahoma', //刻度值上字體 
            angle:40,           //刻度值與座標軸夾角，角度爲座標軸正向順時針方向 
            fontWeight:'normal', //字體的粗細 
            fontStretch:1//刻度值在所在方向（座標軸外）上的伸展(拉伸)度
        }
        showTicks: true,        //是否顯示刻度線以及座標軸上的刻度值,
        showTickMarks: true,    // 設置是否顯示刻度
        useSeriesColor: true   //若是有多個縱（橫）座標軸，經過該屬性設置這些座標軸是否以不一樣顏色顯示
    },

    axes: {
        xaxis: {
            // same options as axesDefaults
        },
        yaxis: {
            // same options as axesDefaults
        },
        x2axis: {
            // same options as axesDefaults
        },
        y2axis: {
            // same options as axesDefaults
        }
    },

    seriesDefaults: {//若是有多個分類，這可經過該配置屬性設置各個分類的共性屬性
        show: true,     //設置是否渲染整個圖表區域（即顯示圖表中內容）.
        xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
        yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
        label: '',      // 用於顯示在分類名稱框中的分類名稱.
        color: '',      // 分類在圖標中表示（折現，柱狀圖等）的顏色.
        lineWidth: 2.5, // 分類圖（特別是折線圖）哪寬度.
        shadow: true,   // 各圖在圖表中是否顯示陰影區域.
        shadowAngle: 45,    //參考grid中相同參數.
        shadowOffset: 1.25, //參考grid中相同參數.
        shadowDepth: 3,     //參考grid中相同參數.
        shadowAlpha: 0.1,   // Opacity of the shadow.
        showLine: true,     //是否顯示圖表中的折線（折線圖中的折線） 
        showMarker: true,   // 是否強調顯示圖中的數據節點 
        fill: false,        // 是否填充圖表中折線下面的區域（填充顏色同折線顏色）以及legend 
                            //設置的分類名稱框中分類的顏色，此處注意的是若是fill爲true， 
                           //那麼showLine必須爲true，不然不會顯示效果 
        fillAndStroke: false,       //在fill爲true的狀態下，在填充區域最上面顯示一條線（若是是折線圖則顯示該折線） 
        fillColor: undefined,       // 設置填充區域的顏色 
        fillAlpha: undefined,       // 梃置填充區域的透明度 
        renderer: $.jqplot.PieRenderer, // 利用渲染器（這裏是利用餅圖PieRenderer）渲染現有圖表 
                                       //，從而轉換成所需圖表 
        rendererOptions: {}, // 傳給上個屬性所設置渲染器的option對象，線狀圖的渲染器沒有option對象， 
                             //不一樣圖表的Option配置對象請參見下面《jqPlot各個不一樣插件的Option對象設置》 
                             //中各個圖表的配置Option對象 
        markerRenderer: $.jqplot.MarkerRenderer,    // renderer to use to draw the data   
                                                    // point markers. 
        markerOptions: {   
            show: true,             // 是否在圖中顯示數據點 
            style: 'filledCircle', // 各個數據點在圖中顯示的方式，默認是"filledCircle"(實心圓點), 
                                    //其餘幾種方式circle，diamond, square, filledCircle， 
                                    // filledDiamond or filledSquare. 
            lineWidth: 2,       // 數據點各個的邊的寬度（若是設置過大，各個邊會重複，會顯示的相似於實心點） 
            size: 9,            // 數據點的大小 
            color: '#666666'    // 數據點的顏色 
            shadow: true,       // 是否爲數據點顯示陰影區（增長立體效果） 
            shadowAngle: 45,    // 陰影區角度，x軸順時針方向 
            shadowOffset: 1,    // 參考grid中相同參數 
            shadowDepth: 3,     //參考grid中相同參數 
            shadowAlpha: 0.07   // 參考grid中相同參數 
        } 
        isDragable: true,//是否容許拖動（若是dragable包已引入）,默承認拖動
    },

    series:[
       //若是有多個分類須要顯示，這在此處設置各個分類的相關配置屬性 
       //eg.設置各個分類在分類名稱框中的分類名稱
//[label: 'Traps Division'},{label: 'Decoy Division'},{label: 'Harmony Division'}]//配置參數設置同seriesDefaults
],
  legend: { 
        show: false,//設置是否出現分類名稱框（即全部分類的名稱出如今圖的某個位置） 
        location: 'ne',     // 分類名稱框出現位置, nw, n, ne, e, se, s, sw, w. 
        xoffset: 12,        // 分類名稱框距圖表區域上邊框的距離（單位px） 
        yoffset: 12,        // 分類名稱框距圖表區域左邊框的距離(單位px) 
        background:''        //分類名稱框距圖表區域背景色 
        textColor:''          //分類名稱框距圖表區域內字體顏色   
    }, 
    grid: { 
        drawGridLines: true,        // wether to draw lines across the grid or not. 
        gridLineColor: '#cccccc'    // 設置整個圖標區域網格背景線的顏色 
        background: '#fffdf6',      // 設置整個圖表區域的背景色 
        borderColor: '#999999',     // 設置圖表的(最外側)邊框的顏色 
        borderWidth: 2.0,           //設置圖表的（最外側）邊框寬度 
        shadow: true,               // 爲整個圖標（最外側）邊框設置陰影，以突出其立體效果 
        shadowAngle: 45,            // 設置陰影區域的角度，從x軸順時針方向旋轉 
        shadowOffset: 1.5,          // 設置陰影區域偏移出圖片邊框的距離 
        shadowWidth: 3,             // 設置陰影區域的寬度 
        shadowDepth: 3,             // 設置影音區域重疊陰影的數量 
        shadowAlpha: 0.07           // 設置陰影區域的透明度 
        renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid. 
        rendererOptions: {}         // options to pass to the renderer. Note, the default 
                                    // CanvasGridRenderer takes no additional options. 
    },                               
    //jqPlot各個不一樣插件的Option對象設置
    // BarRenderer（設置柱狀圖的Option對象） 
    //該Option對象適用與柱狀圖的series和seriesDefault屬性的相關配置對象設置 
    seriesDefaults: { 
        rendererOptions: { 
            barPadding: 8,      //設置同一分類兩個柱狀條之間的距離（px） 
            barMargin: 10,      //設置不一樣分類的兩個柱狀條之間的距離（px）（同一個橫座標表點上） 
            barDirection: 'vertical', //設置柱狀圖顯示的方向：垂直顯示和水平顯示 
                                 //，默認垂直顯示 vertical or horizontal. 
            barWidth: null,     // 設置柱狀圖中每一個柱狀條的寬度 
            shadowOffset: 2,    // 同grid相同屬性設置 
            shadowDepth: 5,     // 同grid相同屬性設置 
            shadowAlpha: 0.8,   // 同grid相同屬性設置 
        } 
    },   
    // Cursor(光標) 
    // 鼠標移動到圖中時，鼠標在圖中顯示形式，常與和高亮功能同時使用 
    //此外，經過設置該屬性的zoom相關屬性來對圖中某個區域鑽取（就選定區域放大） 
    //該配置對象直接在option下配置 
    cursor: { 
        style: 'crosshair',     //當鼠標移動到圖片上時，鼠標的顯示樣式，該屬性值爲css類 
        show: true,              //是否顯示光標 
        showTooltip: true,      // 是否顯示提示信息欄 
        followMouse: false,     //光標的提示信息欄是否隨光標（鼠標）一塊兒移動 
        tooltipLocation: 'se', // 光標提示信息欄的位置設置。若是followMouse=true,那麼該位置爲 
                                //提示信息欄相對於光標的位置。不然，爲光標提示信息欄在圖標中的位置 
                                // 該屬性可選值： n, ne, e, se, etc. 
        tooltipOffset: 6,     //提示信息欄距鼠標(followMouse=true)或座標軸（followMouse=false）的位置 
        showTooltipGridPosition: false,//是否在信息提示欄中顯示光標位置（取其據圖標左和上邊緣線像素距離）     
        showTooltipUnitPosition: true,// 是否顯示提示光標所在位置（取其在橫縱軸上數據值）的信息欄 
                    //注：注意此處與showTooltipGridPosition值區別，前者顯示座標值，該處顯示的是數據值 
        tooltipFormatString: '%.4P',    // 同Highlighter的tooltipFormatString 
        useAxesFormatters: true,        // 同Highlighter的tooltipFormatString 
        tooltipAxesGroups: [], // show only specified axes groups in tooltip. Would specify like: 
                                // [['xaxis', 'yaxis'], ['xaxis', 'y2axis']]. By default, all axes 
                                // combinations with for the series in the plot are shown. 
         
    }, 
    // Dragable（拖動） 
    //該配置對象經過seriesDefaults和series配置對象進行配置 
    seriesDefaults: { 
     dragable: { 
         color: undefined,       // 當拖動數據點是，拖動線與拖動數據點顏色 
         constrainTo: 'none',    //設置拖動的的範圍: 'x'（只能在橫向上拖動）, 
                               // 'y'（只能在縱向上拖動）, or 'none'（無限制）. 
     }, 
    }, 
    // Highlighter（高亮） 
    //設置高亮動做option屬性對象 
     //鼠標移動到某個數據點上時，該數據點增大並顯示提示信息框 
    //該配置對象直接在option下配置     
    highlighter: { 
        lineWidthAdjust: 2.5,   //當鼠標移動到放大的數據點上時，設置增大的數據點的寬度                                   
                                // 目前僅適用於非實心數據點       
        sizeAdjust: 5,          // 當鼠標移動到數據點上時，數據點擴大的增量增量 
        showTooltip: true,      // 是否顯示提示信息欄 
        tooltipLocation: 'nw', // 提示信息顯示位置（英文方向的首寫字母）: n, ne, e, se, s, sw, w, nw. 
        fadeTooltip: true,      // 設置提示信息欄出現和消失的方式（是否淡入淡出） 
        tooltipFadeSpeed: "fast"//設置提示信息欄淡入淡出的速度： slow, def, fast, 或者是一個毫秒數的值. 
        tooltipOffset: 2,       // 提示信息欄據被高亮顯示的數據點的偏移位置，以像素計。 
        tooltipAxes: 'both',    // 提示信息框顯示數據點那個座標軸上的值，目前有橫/縱/橫縱三種方式。 
                    //值分別爲 x, y or xy. 
        tooltipSeparator: ', ' // 提示信息欄不一樣值之間的間隔符號 
        useAxesFormatters: true // 提示信息框中數據顯示的格式是否和該數據在座標軸上顯示格式一致 
        tooltipFormatString: '%.5P' // 用於設置提示信息框中數據顯示的格式，前提條件是useAxesFormatters 
                                    // 爲false. 此時信息提示框中數據格式再也不與座標軸一致，而是以此爲準 
                                    //同時，該屬性還支持html格式字符串 
                                    //eg:'<b><i><span style="color:red;"  mce_style="color:red;">hello</span></i></b> %.2f' 
    }, 
     
    // LogAxisRenderer(指數渲染器) 
    // 該渲染器只有兩個屬性， 指數渲染器經過axesDefaults和axes配置對象進行配置
    axesDefaults: { 
        base: 10,                   // 指數的底數 
        tickDistribution: 'even',   // 座標軸顯示方式：'even' or 'power'. 'even' 產生的是均勻分佈於座標 
                                  //軸上的座標刻度值 。而'power' 則是根據不斷增大的增數來肯定座標軸上的刻度 
    }, 
    // PieRenderer(設置餅狀圖的OPtion對象) 
    // 餅狀圖經過seriesDefaults和series配置對象進行配置 
    seriesDefaults: { 
        rendererOptions: { 
             diameter: undefined, // 設置餅的直徑 
            padding: 20,        // 餅距離其分類名稱框或者圖表邊框的距離，變相該表餅的直徑 
            sliceMargin: 20,     // 餅的每一個部分之間的距離 
            fill:true,         // 設置餅的每部分被填充的狀態 
            shadow:true,       //爲餅的每一個部分的邊框設置陰影，以突出其立體效果 
            shadowOffset: 2,    //設置陰影區域偏移出餅的每部分邊框的距離 
            shadowDepth: 5,     // 設置陰影區域的深度 
            shadowAlpha: 0.07   // 設置陰影區域的透明度 
        } 
    }, 
    //pointLabels(數據點標籤) 
    //用於在數據點所在位置顯示相關信息（非提示框性質） 
    seriesDefaults: { 
        pointLabels: { 
            location:'s',//數據標籤顯示在數據點附近的方位 
            ypadding:2   //數據標籤距數據點在縱軸方向上的距離 
        } 
    } 
    // Trendline（趨勢線） 
    // 餅狀圖經過seriesDefaults和series配置對象進行配置 
    seriesDefaults: { 
        trendline: { 
            show: true,         // 是否顯示趨勢線 
            color: '#666666',   // 趨勢線顏色 
            label: '',          // 趨勢線名稱 
            type: 'linear',     //趨勢線類型'linear'（直線）, 'exponential'（冪值數線） or 'exp' 
            shadow: true,       // 同grid相同屬性設置 
            lineWidth: 1.5,     // 趨勢線寬度 
            shadowAngle: 45,    // 同grid相同屬性設置 
            shadowOffset: 1.5, // 同grid相同屬性設置 
            shadowDepth: 3,     // 同grid相同屬性設置 
            shadowAlpha: 0.07   // 同grid相同屬性設置   
        } 
    } 
}