Web前端圖表繪製JQuery插件jqplot

在此以前使用了Chart.js、Highcharts,首先了解一下這兩款插件的優點與不足，而後再來了解jqplot。

1.Chart

Chart中文官網：http://chartjs.cn/

1.1優點：

1.1.1Chart是一個基於HTML5標籤canvas來開發的純javascript圖表庫，Chart.js（44KB）Chart.min.js(20KB),只須要引用一個文件便可搞定，用起來很是乾淨舒服。

1.1.2Chart能夠支持六種圖標類型：折線圖(Line)、柱形圖(Bar)、餅形圖(Pie)、環餅圖(Doughnut)、雷達圖(Radar)、級地圖(PolarArea)

1.2缺點：

1.2.1缺少對每一個色塊提示所表明的數據意義文字說明，例如：折線統計圖出現多條折線時每條折線所表明的數據意義

1.2.2缺乏對摺線焦點的詳細數聽說明，例如：折線或柱形每一個節點的具體數據值顯示

1.2.3.缺乏對摺線圖X,Y軸註釋說明及數據單位標註，例如：須要對摺線圖標註Y軸表明的是交易金額

2.Highcharts

 Highcharts中文官網：http://www.hcharts.cn/ 

2.1優點

2.1.1Highcharts是一個圖表類型豐富，效果酷炫，功能強大於一身的javascript圖表庫

2.1.21Highcharts支持曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表，而且還能夠定製本身想要的效果。

2.2缺點

2.2.1Highcharts分爲我的版和商業版，一些複雜的效果須要單獨收費。

3.jqplot

 這裏主要說一下jqplot，由於通過對比，最終項目選擇了它，然而jqplot也是一個很是強大的JS圖表插件。

 jqplot爲基於JQuery的一款圖表插件，可擴展性強，關鍵是開源。

因爲jqplot文檔下有許多分別在不一樣場景下使用的插件，因此這裏作一個簡單的介紹。

jqplot官方下載地址：http://www.jqplot.com/

目前最新的版本是jquery.jqplot.1.0.9.d96a669.zip

 解壓後各文件的使用方法：

若是無需特殊配置，可直接引入jqplot主文件便可。

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

*若是你的瀏覽器不支持HTML5的canvas，那麼必需要引入「excanvas.js」，plugins文件夾下爲jqplot擴展功能的JS庫。

重要：plugins下各JS庫的做用

 1.plugins/jqplot.barRenderer.min.js

主要用於顯示刻度爲日期格式的座標軸，它加強了javascript的本地數據處理能力，它幾乎支持全部的日期格式。
另外還提供了強大的格式化功能，它能將數據中日期字符串格式化爲你須要的格式並顯示在座標軸的刻度線上。

 2.plugins/jqplot.categoryAxisRenderer.min.js

 主要用於將顯示於刻度處的值顯示與兩個刻度之間，固然其表達意思也發生變化，由於刻度值處值表示某個點處的值，而它則表明某個範圍內的值。
比較適合與柱狀圖聯合使用。

 3.plugins/jqplot.barRenderer.min.js

 主要用於顯示柱狀圖，可以很好的控制每一個組（位於一個刻度值處的各個分類）內及組間距離，而且該柱狀圖可以水平顯示。

 4.plugins/jqplot.cursor.min.js

 主要用於鼠標移動到圖中時，鼠標在圖中顯示形式，經常使用與和高亮功能同時使用。

5.plugins/jqplot.highlighter.min.js

主要用於當鼠標移動到圖中數據點上時，在鼠標附近顯示提示欄，並將相關信息顯示在提示欄。默認顯示值是橫縱座標軸刻度值。固然，提示框中信息是能夠根據自身須要定製的。
6.plugins/jqplot.logAxisRenderer.min.js

主要用於以指數計算的方式生成座標軸上刻度值。默認狀況下，刻度值是均勻顯示的，可是刻度值也能夠按指數增加的方式顯示。

7.plugins/jqplot.ohlcRenderer.min.js

主要用於顯示甘特圖。一般狀況下，該渲染器與dateAxisRenderer一塊兒使用較多

8.plugins/jqplot.dragable.min.js

用戶可以拖動某個數據點，jqplot會自動重畫拖動後的新圖表。同時，被拖動的數據點的數據值也隨着拖動發生變化。

9.plugins/jqplot.trendline.min.js

主要用於對現有數據進行線性迴歸計算，並自動將計算結果以趨勢線的形式展現出來，當用戶拖動某個數據點時，趨勢線亦隨用戶拖動而變化。

10.plugins/jqplot.pointLabels.min.js

主要用於將數據節點相關的的信息以標籤的方式放於該數據節點附近；對於相應數據爲空的，其標籤不顯示。

 

有了以上對每一個插件的介紹，在實際使用中才能更好的、靈活的去實現須要展現的效果。

1.jqplot折線圖

 下面的列舉折線圖經常使用的一些配置，能夠直接複製代碼，根據參數配置說明調試出想要的折線圖表效果

 插件引入

<!--[if lt IE 9]><script type="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="~/Scripts/jquery.jqplot/jquery.jqplot.min.js"></script>
<script src="~/Scripts/jquery.jqplot/plugins/jqplot.highlighter.js"></script>
<script src="~/Scripts/jquery.jqplot/plugins/jqplot.cursor.js"></script>
<script src="~/Scripts/jquery.jqplot/plugins/jqplot.canvasTextRenderer.js"></script>
<script src="~/Scripts/jquery.jqplot/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script src="~/Scripts/jquery.jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="~/Scripts/jquery.jqplot/plugins/jqplot.pointLabels.js"></script>
<script src="~/Scripts/jquery.jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
<script src="~/Scripts/jquery.jqplot/plugins/jqplot.barRenderer.js"></script>

<link href="~/Scripts/jquery.jqplot/jquery.jqplot.min.css" rel="stylesheet" />

Html添加容器來承載圖表

<div id="UserChart" style=" width:1000px; height:400px;"></div>

傳遞數據並顯示圖表

 //$.jqplot('target', data, options);//target：目標位置(目標元素ID)。data：用於圖標顯示的幾組數據源。options：對圖片顯示的個性化配置參數。
        $.jqplot('UserChart',
            [
                [['2016-05-12', 5], ['2016-05-11', 10], ['2016-05-10', 15], ['2016-05-09', 20], ['2016-05-08', 25],
                ['2016-05-07', 50], ['2016-05-06', 100], ['2016-05-05', 120], ['2016-05-04', 150], ['2016-05-03', 180],
                ['2016-05-02', 200], ['2016-05-01', 220], ['2016-04-30', 210], ['2016-04-29', 240], ['2016-04-28', 270],
                ['2016-04-27', 290], ['2016-04-26', 300], ['2016-04-25', 350], ['2016-04-24', 390], ['2016-04-23', 580]]
                //[[1,2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]//若是不配置axes則能夠直接經過data配置(X,Y)給定當前位置
            ],
            {
                //圖標標題
                title: {
                    text: '近一個月用戶量信息',
                    show: true,
                    fontFamily: "Microsoft Yahei",
                    fontSize: "15pt",//pt磅，em相對字體大小
                    textColor: "#000"
                },
                //提示欄顯示配置，一般在右上角顯示
                legend: {
                    show: true,
                    location: 'ne',// 提示欄信息顯示位置（英文方向的首寫字母）: n, ne, e, se, s, sw, w, nw.
                    placement: 'outside'
                },
                //提示欄顯示信息配置，多個數據分類需配置多個
                series: [{
                    label: '平臺用戶',//按data前後順序顯示每種分類名稱
                    markerOptions:
                        {
                            size: 6,
                            style: 'circle'
                        }
                },
                {
                    label: '普通註冊',
                    markerOptions:
                        {
                            size: 4,
                            style: 'circle'
                        }
                },
                {
                    label: '機構註冊',
                    markerOptions:
                        {
                            size: 4,
                            style: 'circle'
                        }
                }
                ],
                //節點數值提示，須要引用jqplot.pointLabels.js
                seriesDefaults:{
                    pointLabels: { show: true, ypadding: -1 } //數據點標籤
                },
                //鼠標放在節點時突出顯示當前結點,需引用jqplot.highlighter.js
                highlighter: {
                    show: true,
                    sizeAdjust: 6,//當鼠標移動到數據點上時，數據點擴大的增量
                    fadeTooltip: true,//設置提示信息欄出現和消失的方式（是否淡入淡出）
                    lineWidthAdjust: 2.5,   //當鼠標移動到放大的數據點上時，設置增大的數據點的寬度
                    tooltipOffset: 2,       // 提示信息欄據被高亮顯示的數據點的偏移位置，以像素計
                    tooltipLocation: 'nw' // 提示信息顯示位置（英文方向的首寫字母）: n, ne, e, se, s, sw, w, nw.
                },
                //鼠標在圖標中的提示位置信息，需引用jqplot.cursor.js
                cursor: {
                    show: true,
                    showTooltip: true,// 是否顯示提示信息欄
                    followMouse: false,     //光標的提示信息欄是否隨光標（鼠標）一塊兒移動
                    tooltipLocation: 'se', // 光標提示信息欄的位置設置。若是followMouse=true,那麼該位置爲
                    //提示信息欄相對於光標的位置。不然，爲光標提示信息欄在圖標中的位置
                    // 該屬性可選值： n, ne, e, se, etc.
                    tooltipOffset: 6,     //提示信息欄距鼠標(followMouse=true)或座標軸（followMouse=false）的位置
                },
                //設置X,Y軸默認加載方式
                axesDefaults: {
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,// 設置橫（縱）軸上數據加載的渲染器，需引用jqplot.canvasAxisTickRenderer.js
                    tickOptions: {
                        angle: 270,  //傾斜角度，需引用jqplot.canvasTextRenderer.js
                        fontSize: '10pt'
                    }
                },
                axes: {
                    xaxis: {
                        label: "日期",  //x軸顯示標題
                        renderer: $.jqplot.CategoryAxisRenderer, //x軸繪製方式
                        ticks: [], //設置橫（縱）座標的刻度上的值，可爲該ticks數組中的值// a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]
                        tickOptions: {
                            labelPosition: 'end',//start，middle，auto，end
                        }
                    },
                    yaxis: {
                        label: "用戶量", // y軸顯示標題
                        min: 0,//Y軸最小值
                        //tickOptions: { formatString: '%.2f', fontSize: '10pt' }//帶有兩位浮點小數
                    }
                }
            });

折線圖效果：

若是又須要的話，咱們能夠把繪製圖表的配置按照本身喜歡的樣子設置默認參數，而後做爲經常使用JQ插件保存起來，這樣在之後使用時就方便多了。

下面是對摺線圖作了插件庫的封裝，下次使用時咱們只須要傳入表格title，橫縱座標名稱和每條折線的名稱便可快速繪製出折線統計圖，若是有須要能夠繼續擴展此JS文件。

/*註冊用戶量統計*/
(function ($) {
    $.ajaxDataRenderer = function (TargetId, url,titleName ,xaxisName, yaxisName, seriesArray) {
        $.ajax({
            async: false,
            url: url,
            dataType: "json",
            success: function (msg) {
                var dataValue = new Array(); //數據  
                for (var i = 0; i < msg.length; i++)
                {
                    dataValue[i] = new Array();
                    for (var key in msg[i])
                    {
                        var LineValue = new Array();
                        LineValue.push(key, msg[i][key])
                        dataValue[i].push(LineValue);
                        //dataValue[i][key] = msg[i][key];
                    }
                }

                var plot1 = $.jqplot(TargetId, dataValue, OptionLine(titleName, xaxisName, yaxisName, seriesArray));
                plot1.replot();//釋放繪畫對象
            },
            error: function () {
                alert("數據接收錯誤");
            }
        });
    };
    //折線數據設置
    var DataLine = [
            [['2016-05-12', 5], ['2016-05-11', 10], ['2016-05-10', 15], ['2016-05-09', 20], ['2016-05-08', 25],
            ['2016-05-07', 50], ['2016-05-06', 100], ['2016-05-05', 120], ['2016-05-04', 150], ['2016-05-03', 180],
            ['2016-05-02', 200], ['2016-05-01', 220], ['2016-04-30', 210], ['2016-04-29', 240], ['2016-04-28', 270],
            ['2016-04-27', 290], ['2016-04-26', 300], ['2016-04-25', 350], ['2016-04-24', 390], ['2016-04-23', 580]]
    ]
    //折線參數設置
    var OptionLine = function (titleName,xaxisName, yaxisName, seriesArray) {
        return {
            //圖標標題
            title: {
                text: titleName,
                show: true,
                fontFamily: "Microsoft Yahei",
                fontSize: "15pt",
                textColor: "#000"
            },
            //提示欄顯示配置，一般在右上角顯示
            legend: {
                show: true,
                location: 'ne',// 提示欄信息顯示位置（英文方向的首寫字母）: n, ne, e, se, s, sw, w, nw.
                placement: 'outside'
            },
            //提示欄顯示信息配置，多個數據分類需配置多個
            series: [{
                label: seriesArray[0],//按data前後順序顯示每種分類名稱
                markerOptions:
                    {
                        size: 6,
                        style: 'circle'
                    }
            },
            {
                label: seriesArray[1],
                markerOptions:
                    {
                        size: 4,
                        style: 'circle'
                    }
            },
            {
                label: seriesArray[2],
                markerOptions:
                    {
                        size: 4,
                        style: 'circle'
                    }
            }
            ],
            //節點數值提示，須要引用jqplot.pointLabels.js
            seriesDefaults: {
                pointLabels: { show: false, ypadding: -1 } //數據點標籤
            },
            //鼠標放在節點時突出顯示當前結點,需引用jqplot.highlighter.js
            highlighter: {
                show: true,
                sizeAdjust: 6,//當鼠標移動到數據點上時，數據點擴大的增量
                fadeTooltip: true,//設置提示信息欄出現和消失的方式（是否淡入淡出）
                lineWidthAdjust: 2.5,   //當鼠標移動到放大的數據點上時，設置增大的數據點的寬度
                tooltipOffset: 2,       // 提示信息欄據被高亮顯示的數據點的偏移位置，以像素計
                tooltipLocation: 'nw' // 提示信息顯示位置（英文方向的首寫字母）: n, ne, e, se, s, sw, w, nw.
            },
            //鼠標在圖標中的提示位置信息，需引用jqplot.cursor.js
            cursor: {
                show: true,
                showTooltip: true,// 是否顯示提示信息欄
                followMouse: false,     //光標的提示信息欄是否隨光標（鼠標）一塊兒移動
                tooltipLocation: 'nw', // 光標提示信息欄的位置設置。若是followMouse=true,那麼該位置爲
                //提示信息欄相對於光標的位置。不然，爲光標提示信息欄在圖標中的位置
                // 該屬性可選值： n, ne, e, se, etc.
                tooltipOffset: 6,     //提示信息欄距鼠標(followMouse=true)或座標軸（followMouse=false）的位置
                useAxesFormatters: false,// 提示信息框中數據顯示的格式是否和該數據在座標軸上顯示格式一致  
            },
            //設置X,Y軸默認加載方式
            axesDefaults: {
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,// 設置橫（縱）軸上數據加載的渲染器，需引用jqplot.canvasAxisTickRenderer.js
                tickOptions: {
                    angle: 270,  //傾斜角度，需引用jqplot.canvasTextRenderer.js
                    fontSize: '10pt'
                }
            },
            axes: {
                xaxis: {
                    label: xaxisName,  //x軸顯示標題
                    renderer: $.jqplot.CategoryAxisRenderer, //x軸繪製方式
                    ticks: [], //設置橫（縱）座標的刻度上的值，可爲該ticks數組中的值// a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]
                    tickOptions: {
                        labelPosition: 'end',//start，middle，auto，end
                    }
                },
                yaxis: {
                    label: yaxisName, // y軸顯示標題
                    min: 0,//Y軸最小值
                    //tickOptions: { formatString: '%.2f', fontSize: '10pt' }//帶有兩位浮點小數
                }
            }
        }
    };



})(jQuery);

繪圖jqplot插件進一步封裝

使用時一行代碼搞定

$.ajaxDataRenderer("UserChart", "/Summary/Analyse/MonthUserTrend","近一個月用戶註冊量","日期","用戶量",new Array("平臺用戶","理財經理","產品經理"));