JQ图标插件之JQCharts
来源：互联网 发布：淘宝权女友辣椒 编辑：程序博客网 时间：2024/04/29 05:01
由于要在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>
<script type="text/javascript">
var c=document.getElementsByName("h").length
var id=document.getElementsByName("h")[c-1].id;
var myChart = new JSChart(id , 'line');
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);
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);
}
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");
}
}
前台：
<script type="text/javascript" src="s/jscharts.js"></script>
<%
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>
<script type="text/javascript">
var c=document.getElementsByName("h").length
var id=document.getElementsByName("h")[c-1].id;
var myChart = new JSChart(id , 'line');
myChart.setDataXML("data"+id+".xml");
myChart.setDataXML("public.xml");
myChart.draw();
</script>
<%
}
%>
- JQ图标插件之JQCharts
- jq 插件 之 datatable 使用
- JQ插件
- jq插件
- jq自定义插件—$.fn的使用之(打字机）
- JQ滚动插件
- JQ 上传插件
- jq小插件tiptip
- jq遮罩层插件
- JQ 倒计时插件
- jq 插件编写 待
- JQ插件写法二
- jq UI插件
- jq 插件开发
- jq开发插件格式
- 常用前端jq插件
- jq插件写法
- JQ插件开发
- Silverlight入门学习
- 在C++中集成Lua脚本
- jboss4.2.2GA:ERROR [URLDeploymentScanner] Incomplete Deployment listing
- SVN标志
- ImportError: Settings cannot be imported, because environment variable DJANGO_SETTINGS_MODULE is undefined. 错误解决方法
- JQ图标插件之JQCharts
- 程序员眼中的编程语言和操作系统
- 线程终止方式
- update-alternatives学习笔记
- oracle 10g中数据如何导入到oracle9中
- 测试用例设计方法1-等价类边界值
- GlobalAlloc, HeapAlloc, malloc, new, default heap, dynamic heap
- 怎样完全卸载sql2005
- ODBC-JDBC Gateway
