JQ图标插件之JQCharts

由于要在OA上开发一个图表模块，用于统计，显示公司各部门的业绩。开始接触JQ的图表插件，最后选择了JQCharts，因为它相对简单，且功能也强大。虽然官网上有一些实例，可相对过于简单，下面以一个我自己的完整实例来做介绍。

如何从数据库取数-----后台生成XML文档----设定一些基本参数----前台显示图表 (读取XML文档)

设定数据表中有18个字段，ID号，部门ID号，三个业绩标准(a，b，c),单位(万)，12个月的业绩，

最开始要先现在jscharts.js

1：首先从数据库取出数据存在 ArrayList 数组

ArrayList Performance = dal.PerformancetAlldata();

PerformancetAlldata()为自定义取数函数，用户自己编写

2：生XML文档

先举例一个支持JQCharts读取的标准的xml文档

<?xml version="1.0" encoding="gb2312"?>
<JSChart> //必须定义
<dataset type="line"> //图表节点无可不写

<data unit="10" value="2"/>
  <data unit="15" value="0"/>
</dataset>
<optionset>   //图表属性可不写，将采用JQCharts默认设置
  <option set="setAxisNameFontSize" value="10"/>
  <option set="setAxisNameX" value="'dfsf'"/>
</optionset>
</JSChart>

对于XML文档的操作，首先需要引用 using System.Xml;

xmldoc = new XmlDocument();
XmlDeclaration xmldecl;
xmldecl = xmldoc.CreateXmlDeclaration("1.0", "utf-8", null);

XmlElement root = xmldoc.DocumentElement;
xmldoc.InsertBefore(xmldecl, root);

xmlelem = xmldoc.CreateElement("", "JSChart", "");//JQCharts读取的XML文档必须这样定义

xmlelem4 = xmldoc.CreateElement("", "optionset", "");//定义图表属性

string[] mouth = { model.Jan, model.Feb, model.Mar, model.Apr, model.May, model.Jun, model.Jul, model.Aug, model.Sep, model.Oct, model.Nov, model.Dec }; // 将12个月的业绩取出

for (int i = 0; i < mouth.Length; i++)
                {
                    if (mouth[i] != null && mouth[i].ToString().Trim() != "")
                    {
                        check = true;                       }
                }
                if (check)// 若12个月均无数据则跳过
                {
                    xmlelem2 = xmldoc.CreateElement("", "dataset", "");
                    xmlelem2.SetAttribute("type", "line");// 显示方式为折现
                    xmlelem2.SetAttribute("id", "blue");//
                    xmlelem3 = xmldoc.CreateElement("", "data", "");
                    xmlelem3.SetAttribute("unit", "0");//
                    xmlelem3.SetAttribute("value", "0");//
                    xmlelem2.AppendChild(xmlelem3);

for (int i = 0; i < mouth.Length; i++)
                    {
                        if (mouth[i] != null && mouth[i].ToString().Trim() != "")
                        {
                            xmlelemMon = xmldoc.CreateElement("", "data", "");
                            xmlelemMon.SetAttribute("unit", (i + 1).ToString());//
                            xmlelemMon.SetAttribute("value", mouth[i].ToString().Trim());//
                            xmlelem2.AppendChild(xmlelemMon);

xmlelemPertool = xmldoc.CreateElement("", "option", "");
                            xmlelemPertool.SetAttribute("set", "setTooltip");//
                            xmlelemPertool.SetAttribute("value", "[" + (i + 1).ToString() + ",'月份:" + (i + 1).ToString() + "<br/>业绩:" + mouth[i].ToString().Trim() + "<br/>单位: " + model.Per_unit + "','blue']");// 设定鼠标上移到节点显示的提示
                            xmlelem4.AppendChild(xmlelemPertool);
                        }
                    }
                    xmlelem.AppendChild(xmlelem2);

三条业绩标准线，其实也是折现，只是把每个月的业绩设为相同的值，以相同的方法写入XML文档

将xml文档保存到指定路径

xmldoc.AppendChild(xmlelem);
xmldoc.Save(Server.MapPath(".").ToString() + "//data" + model.Group_ID + ".xml");

3：设定一些基本参数

当一张图表有多条线，这些线会一些相同的属性，这里可以把这些属性，写入一个公共的XML文档，属性介绍

4：前台显示图表

在ASPX页面中条用JQCharts方法，显示图表

<%
        if (Performance == null) return;

        foreach (FrameWork.Components.PerformanceTable model in Performance)
        {

    %>
    <div style="width: 420px; position:relative; float:left; margin-left:30px; margin-top:20px;">

     <% Response.Write("<div id='" + model.Group_ID + "'>" + model.G_BusName + "</div>");%>

<% Response.Write("<div style='text-align: center; margin-top: 5px;'>"+ model.G_BusName+" 【"+model.Per_unit+ "】</div>");
          Response.Write("<input type=hidden name=h id=" + model.Group_ID+ " />"); %>

    </div>

myChart.setDataXML("data"+id+".xml");
   myChart.setDataXML("public.xml");
myChart.draw();

    </script>
<%
        }
    %>

完整代码：

后台：

public XmlDocument xmldoc;
        public XmlNode xmlnode;
        public XmlElement xmlelem, xmlelem2, xmlelem3, xmlelem4, xmlelem5;
        public XmlElement xmlelemMon, xmlelemPer, xmlelemPertool;
        public ArrayList Performance = new ArrayList();

private void dataonload()
        {
            dt = new DataTable();
            Performance = dal.PerformancetAlldata();
            foreach (FrameWork.Components.PerformanceTable model in Performance)
            {

bool check = false;
                xmldoc = new XmlDocument();
                //加入XML的声明段落
                //xmlnode = xmldoc.CreateNode(XmlNodeType.XmlDeclaration, "", "");
                XmlDeclaration xmldecl;
                xmldecl = xmldoc.CreateXmlDeclaration("1.0", "utf-8", null);

XmlElement root = xmldoc.DocumentElement;
xmldoc.InsertBefore(xmldecl, root);

//xmldoc.AppendChild(xmlnode);
//加入一个根元素
xmlelem = xmldoc.CreateElement("", "JSChart", "");

xmlelem4 = xmldoc.CreateElement("", "optionset", "");

string[] mouth = { model.Jan, model.Feb, model.Mar, model.Apr, model.May, model.Jun, model.Jul, model.Aug, model.Sep, model.Oct, model.Nov, model.Dec };

for (int i = 0; i < mouth.Length; i++)
                {
                    if (mouth[i] != null && mouth[i].ToString().Trim() != "")
                    {
                        check = true;
                    }
                }
                if (check)
                {
                    xmlelem2 = xmldoc.CreateElement("", "dataset", "");
                    xmlelem2.SetAttribute("type", "line");//
                    xmlelem2.SetAttribute("id", "blue");//
                    xmlelem3 = xmldoc.CreateElement("", "data", "");
                    xmlelem3.SetAttribute("unit", "0");//
                    xmlelem3.SetAttribute("value", "0");//
                    xmlelem2.AppendChild(xmlelem3);

xmlelemPertool = xmldoc.CreateElement("", "option", "");
                            xmlelemPertool.SetAttribute("set", "setTooltip");//
                            xmlelemPertool.SetAttribute("value", "[" + (i + 1).ToString() + ",'月份:" + (i + 1).ToString() + "<br/>业绩:" + mouth[i].ToString().Trim() + "<br/>单位: " + model.Per_unit + "','blue']");//
                            xmlelem4.AppendChild(xmlelemPertool);
                        }
                    }
                    xmlelem.AppendChild(xmlelem2);
                }

string[] name = { "silver", "gold", "Diamond" };
string[] Cname = { "银线", "金线", "钻石线" };
string[] per = { model.Per_Silver, model.Per_Gold, model.Per_Diamond };

for (int i = 0; i < per.Length; i++)
                {
                    if (per[i] != null && per[i].ToString().Trim() != "")
                    {
                        xmlelem5 = xmldoc.CreateElement("", "dataset", "");
                        xmlelem5.SetAttribute("type", "line");//
                        xmlelem5.SetAttribute("id", name[i]);//
                        for (int m = 0; m < 13; m++)
                        {
                            xmlelemPer = xmldoc.CreateElement("", "data", "");
                            xmlelemPer.SetAttribute("unit", m.ToString());//
                            xmlelemPer.SetAttribute("value", per[i].ToString().Trim());//
                            xmlelem5.AppendChild(xmlelemPer);

}

xmlelemPertool = xmldoc.CreateElement("", "option", "");
                        xmlelemPertool.SetAttribute("set", "setTooltip");//
                        xmlelemPertool.SetAttribute("value", "[0,'" + Cname[i].ToString().Trim() + ":" + per[i].ToString().Trim() + " " + model.Per_unit + "','" + name[i].ToString().Trim() + "']");//
                        xmlelem4.AppendChild(xmlelemPertool);

xmlelem.AppendChild(xmlelem5);
}
}

xmlelem.AppendChild(xmlelem4);

xmldoc.AppendChild(xmlelem);
                xmldoc.Save(Server.MapPath(".").ToString() + "//data" + model.Group_ID + ".xml");
            }
        }

前台：

myChart.setDataXML("data"+id+".xml");
   myChart.setDataXML("public.xml");
myChart.draw();

    </script>
<%
        }
    %>

JQ图标插件之JQCharts相关推荐

Font Awesome-一款吊炸天的字体图标插件中文全介绍
这款插件是一个不需要图片只需要引入一个字体文件就能制作非常多精美的图标插件,而且这些图标都是矢量的,可以无限放大,而且可以随意的改变颜色,碉堡了!!! 注意,要看一下内容必须用ie9以上或者是chro ...
Android6.0风格图标,jQuery仿Android样式扁平风格图标插件
Flatify是一款可以制作安卓(Android)样式的Material-Design扁平风格图标的jQuery插件.它小巧实用,通过简单的设置,就可以制作出多种扁平风格的图标. 使用方法使用该扁平 ...
资源: 图片，图表，图标插件
[color=red][b]图标:[/b][/color] 15套华丽的的扁平设计风格的图标 [url]http://www.cnblogs.com/lhb25/p/15-gorgeous-sets- ...
highcharts图标插件详解一
highcharts以其强大的功能,美观的界面,吸引了众多程序员的使用.highcharts的功能也在不断的完善中.highcharts插件官网:http://www.highcharts.com/. ...
图标插件java_java – Eclipse插件：标记的自定义图标
请参阅bug 260909"markerImageProviders扩展点不起作用"(在阅读this thread后找到) Tod Creasey 2009-01-21 07:32 ...
jq动画插件，自制基于vue的圆形时钟
首先附上jq插件库,里面的东西太炫了,建议学前端的可以看看学习下:http://www.jq22.com/ 里面有个"超个性动画版本的个人简历",通过屏幕上不断打印内容,改变相应样 ...
美化----VS Code 文件小图标插件 “VScode icon”
VScode安装------"vscode-icon"插件,获得显示文件小图标例如:
jq画布插件_超炫HTML 5开发的jQuery进度条插件
今天我们分享一个超酷的使用HTML5画布技术开发的进度条插件 - percentageloader.这个插件比普通的水平进度条使用更加炫酷的效果,图形效果类似以前我们介绍的jQuery knob插件 ...
jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下使用vue-cli构建的vue项目,webpack的配置文 ...

JQ图标插件之JQCharts

JQ图标插件之JQCharts相关推荐

最新文章

热门文章