使用jquery第三方插件（生成曲线图)
最近项目中有用到生成曲线图，经过查找资料解决了，虽然有简单说明但参数比较多和麻烦，于是自己没事就总结了项目中的具体用法：
准备工作：首先添加jquery的插件包到程序中，路径：https://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>
如果还有不明白的多多留言呀！效果图：
