使用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