使用jquery第三方插件（生成曲线图)

最近项目中有用到生成曲线图，经过查找资料解决了，虽然有简单说明但参数比较多和麻烦，于是自己没事就总结了项目中的具体用法：

准备工作：首先添加jquery的插件包到程序中，路径：http://files.cnblogs.com/jameslif/codebase.rar 然后在代码中依次添加引用文件

准备你认为OK的几种颜色值我这里有收藏：常用的颜色（30种）http://www.cnblogs.com/jameslif/archive/2012/05/10/2494712.html 准备工作OK了；

property是重要的参数

 1 public string property;
 2 public string dataKind;
 3 public string data;
 4 public string simple;
 5 string[] colors = { "#51e1d5", "#8DC63F", "#F7EE1D", "#ED1C24", "#ED9944", "#0000FF", "#60281e", "#827100", "#ca6924", "#ca6924",
 6                       "#6e511e","#bddd22","#789262","#0eb83a","#000000","#c0ebd7","#424c50","#44cef6","#4b5cc4","#8d4bbb"};
 7  private void SetProperty()
 8     {
 9         property = "{maxValue:110,minValue:0,stepValue:5,valueP:30,maxNorm:24,minNorm:1,stepNorm:1,normP:27,";
10         property += "normFormat:\"&d月\",curve_border:2,point_radius:4,tipX:\"月份\",tipY:\"得分\"}";
11     }

解释：color为某一种数据的代表颜色；maxValue:110,//Y轴最大值 minValue:0,//Y轴最小值；stepValue:5,//Y轴每两个刻度间距所表示的单元步进值；valueP:30,//表示Y轴每个单元步进值所用的像素高度；maxNorm:24,//X轴最大值；minNorm:1,//X轴最小值；stepNorm:1,//X轴每两个刻度间距所表示的单元步进值；normP:27,//表示X轴每个单元步进值所用的像素宽度；normFormat:"&d月",//X轴上坐标值的显示单位格式，其中必须包含&d占位符，用来被X轴的真实值替换，默认为"&d"；curve_border:2,//曲线的粗细，单位像素；point_radius:4,//圈点的半径，单位像素；tipX:"月份",//浮动提示框中的X轴显示文字说明；tipY:"得分"//浮动提示框中的Y轴显示文字说明

setDataKind方法中的传参: dataKind

 public void SetDataKind(){SoftNameSpace.BLL.dept bll = new SoftNameSpace.BLL.dept();DataSet ds = bll.GetAllList();int i = 0;string color = "#51e1d5";//默认值;dataKind = "[";foreach (DataRow dr in ds.Tables[0].Rows){if (i < colors.Length){color = colors[i];}else{color = "#51e1d5";//默认值;
            }dataKind += "{id:'c" + (i++).ToString() + "',color:'" + color + "',label:'" + dr["deptName"].ToString() + "'},";}//删除逗号if (dataKind.Length > 2){dataKind = dataKind.Remove(dataKind.Length - 1, 1);}dataKind = dataKind + "]";}

解释：其中,ID为唯一序列号,color为该种数据的颜色，label为说明文字最终形式：[{id:'c0',color:'#51e1d5',label:'修车车间'},{id:'c1',color:'#8DC63F',label:'动态车间'}]

loadDataList方法中的传参: data(即为要显示渲染的具体数据内容)

 private string Analysis(string id, string name){SoftNameSpace.BLL.examList bll = new SoftNameSpace.BLL.examList();DataSet ds = bll.GetList("year(examdate) = '" + dropyear.Text + "' order by d.DeptName,examdate ");string ret = "{id:'" + id + "',items:[";foreach (DataRow dr in ds.Tables[0].Rows){if (dr["DeptName"].Equals(name)){DateTime dt = Convert.ToDateTime(dr["examDate"].ToString());ret += "[" + dt.Month.ToString() + "," + dr["SumValue"] + ",true],";}}//删除多余的逗号ret = ret.Remove(ret.Length - 1, 1);ret += "]}";return ret;}

解释：id：唯一序列号，与数据类型的序列号对应，用于快速找出该组数据是哪一种数据；items，数据的详细信息，为一个二维数组，每个一维单元中的小数组里的参数是这样的：第一个为坐标系里的X值，第二个为坐标系里的Y值，第三个表示该点上要不要画一个能出TIP提示信息的圈点最终形式：{id:'c0',items:[[3,100.00,true],[4,94.70,true],[5,99.50,true]]}

loadSimpleData方法中的传参: simple(即为要显示渲染的具体数据内容

 1  public void SetData()2     {3         SoftNameSpace.BLL.dept bll = new SoftNameSpace.BLL.dept();4         DataSet ds = bll.GetAllList();5         int i = 0;6         data = "[";7         foreach (DataRow dr in ds.Tables[0].Rows)8         {9             data += Analysis("c" + (i++).ToString(), dr["deptName"].ToString()) + ",";
10         }
11         //删除逗号
12         if (data.Length > 2)
13         {
14             data = data.Remove(data.Length - 1, 1);
15         }
16         data = data + "]";
17     }

解释：最终形式[{id:'c0',items:[[3,100.00,true],[4,94.70,true],[5,99.50,true]]},{id:'c1',items:[[3,100.00,true],[4,90.50,true],[5,99.20,true]]},{id:'c2',items:[[3,100.00,true],[4,94.30,true],[5,94.60,true]]}可以看出，该形式是data数组中的一个单元

前段JavsScript代码

<script type="text/javascript">var property=<%=property %>var dataKind=<%=dataKind %>;var data=<%=data %>;var simple=<%=simple %>;var demo;$(document).ready(function(){demo=$.createGooCurveChart($("#demo"),property);demo.setTitle("达标考核揭示表","分");demo.setDataKind(dataKind,600,150,"right");demo.loadSimpleData(simple);demo.loadDataList(data);//demo.clearAllData();
    });</script>

--页面提出来的显示区域<div id="demo">
</div>

如果还有不明白的多多留言呀！效果图：

转载于:https://www.cnblogs.com/jameslif/archive/2012/05/10/2494705.html

使用jquery第三方插件（生成曲线图)相关推荐

vue-cli配置jquery 以及jquery第三方插件
只使用jquery: 1. cnpm install jquery --save 2. cnpm install @types/jquery --save-dev (不使用ts的不需要安装此声明 ...
jQuery第三方插件
jQuery第三方插件 1.layer 2.瀑布流插件 3.图片懒加载 4.cookie操作插件 5.表单验证 jquery提供很多非常好用的插件,使用这些插件能够让我们开发网页的速度大大提升. 推荐 ...
JQuery qrcode插件生成二维码，并转换为image图片可识别
前言插件是基于jquery的,必须先引入jquery再引入qrcode插件 1.引入jquery 和 jQuery qrcode插件引入jq <script src="https: ...
angular 4使用jquery 第三方插件库
用jBox插件为例子1,npm install jBox --save2,找到.angular-cli.json 增加"../node_modules/jbox/Source/jBox.mi ...
超棒的jQuery矢量地图生成插件 - JQVAMP
为什么80%的码农都做不了架构师?>>> 日期:2012-5-14 来源:GBin1.com 在线演示本地下载是不是也考虑生成一个矢量类型的地图?今天我们将介绍的这款j ...
利用jquery的qrcode.js插件生成二维码的两种方式的使用
2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...
使用jQuery的插件qrcode生成二维码（静态+动态生成）及常见问题解决方法
使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法参考文章: (1)使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法 (2)https: ...
jQuery中所用到的第三方插件
我在jquery的学习中,用到了三个第三方的插件,为了能够更方便的查看,把在jQuery中用到的第三方插件整合一个. 首先是cookie插件 cookie插件在jquery中的js样式:cookie在 ...
jQuery二维码插件生成网页二维码
在移动端越来越流行的今天,在PC上做好之后经常会放置一个二维码引导用户到移动端上体验移动版的版本. 如果是一个固定的二维码,我们只需要在网上找个地方生成图片,然后放上图片就可以了.但如果是地址不固定需 ...

使用jquery第三方插件（生成曲线图)

使用jquery第三方插件（生成曲线图)相关推荐

最新文章

热门文章