在此之前使用了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("平台用户","理财经理","产品经理"));
