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);

使用時一行代碼搞定

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