由于要在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>
<%
}
%>