博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用jquery第三方插件(生成曲线图)
阅读量:4701 次
发布时间:2019-06-09

本文共 3903 字,大约阅读时间需要 13 分钟。

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

准备工作:首先添加jquery的插件包到程序中,路径:  然后在代码中依次添加引用文件

              准备你认为OK的几种颜色值 我这里有收藏:常用的颜色(30种) 准备工作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代码

--页面提出来的显示区域 
如果还有不明白的多多留言呀!效果图:

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

你可能感兴趣的文章
调用api 的方式
查看>>
Data mining系列
查看>>
SpringMVC Web项目升级为Springboot项目(二)
查看>>
java实现文件及目录压缩
查看>>
Android Architecture Components 系列(三) LiveData
查看>>
ECMAScript5的新特性总结
查看>>
不归零法编码、曼彻斯特编码和差分曼彻斯特编码
查看>>
uoj 218 火车管理
查看>>
UILabel的抗压缩、抗拉伸、以及控件的约束简述
查看>>
单例模式和多线程有没有关系?
查看>>
ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存
查看>>
链式编程学习之练习篇
查看>>
SQL Server 索引结构及其使用
查看>>
HTTP 错误 404.2 - Not Found.
查看>>
uc/os调度机制深度解析
查看>>
Coreutils - GNU core utilities
查看>>
windows下利用VMware安装mac:构建…
查看>>
hdu 2740 Root of the Problem (水)
查看>>
让delphi解析chrome扩展的native应用
查看>>
用BP人工神经网络识别手写数字
查看>>