用FusionCharts做甘特图
1.同步方式(用xml格式字符)
前台aspx代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FusionCharts甘特图使用(同步方式展示)</title>
<script src="Scripts/FusionCharts.js"></script>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script>
$(function () {
var data = $("#dataXml").val();
var chart = new FusionCharts("../DependOn/Charts/FCF_Gantt.swf", "chartId", "900", "400");
chart.setDataXML(data); //用setDataXML方法加载xml格式数据
chart.render("chartContainer");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="chartContainer">
</div>
<div id="hiddenArea">
<input type="hidden" id="dataXml" value="<%=dataXml %>" />
</div>
</form>
</body>
</html>
后台aspx.cs(拼接xml格式字符串)
protected string dataXml = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
StringBuilder xmlAppend = new StringBuilder();
//设置报表的属性
xmlAppend.AppendLine(@"
<chart showtasknames='1' dateformat='dd/mm/yyyy' tooltextbgcolor='FFFFFF' tooltextbordercolor='333333' ganttlinecolor='99CC00' ganttlinealpha='20' basefontcolor='333333' gridbordercolor='99CC00' taskbarroundradius='4' showshadow='0' >
<categories bgcolor='333333' fontcolor='99cc00' isbold='1' fontsize='14'>
<category start='1/9/2005' end='31/12/2005' name='2005' />
<category start='1/1/2006' end='31/7/2006' name='2006' />
</categories>
<categories bgcolor='99cc00' bgalpha='40' fontcolor='333333' align='center' fontsize='10' isbold='1'>
<category start='1/9/2005' end='30/9/2005' name='Sep' />
<category start='1/10/2005' end='31/10/2005' name='Oct' />
<category start='1/11/2005' end='30/11/2005' name='Nov' />
<category start='1/12/2005' end='31/12/2005' name='Dec' />
<category start='1/1/2006' end='31/1/2006' name='Jan' />
<category start='1/2/2006' end='28/2/2006' name='Feb' />
<category start='1/3/2006' end='31/3/2006' name='March' />
<category start='1/4/2006' end='30/4/2006' name='Apr' />
<category start='1/5/2006' end='31/5/2006' name='May' />
<category start='1/6/2006' end='30/6/2006' name='June' />
<category start='1/7/2006' end='31/7/2006' name='July' />
</categories>
<processes positioningrid='right' align='center' headertext=' Leader ' fontcolor='333333' fontsize='11' isbold='1' isanimated='1' bgcolor='99cc00' headerbgcolor='333333' headerfontcolor='99CC00' headerfontsize='16' bgalpha='40'>
<process name='Mark' id='1' />
<process name='Tom' id='2' />
<process name='David' id='3' />
<process name='Alan' id='4' />
<process name='Adam' id='5' />
<process name='Peter' id='6' />
</processes>
<datatable showprocessname='1' fontcolor='333333' fontsize='11' isbold='1' headerfontcolor='000000' headerfontsize='11'>
<datacolumn headerbgcolor='333333' width='150' headerfontsize='16' headeralign='left' headerfontcolor='99cc00' bgcolor='99cc00' headertext=' Team' align='left' bgalpha='65'>
<text label=' MANAGEMENT' />
<text label=' PRODUCT MANAGER' />
<text label=' CORE DEVELOPMENT' />
<text label=' Q & A / DOC.' />
<text label=' WEB TEAM' />
<text label=' MANAGEMENT' />
</datacolumn>
</datatable>
<tasks width='10'>
<task name='Survey' hovertext='Market Survey' processid='1' start='7/9/2005' end='10/10/2005' id='Srvy' color='99cc00' alpha='60' toppadding='19' />
<task name='Concept' hovertext='Develop Concept for Product' processid='1' start='25/10/2005' end='9/11/2005' id='Cpt1' color='99cc00' alpha='60' />
<task name='Concept' showlabel='0' hovertext='Develop Concept for Product' processid='2' start='25/10/2005' end='9/11/2005' id='Cpt2' color='99cc00' alpha='60' />
<task name='Design' hovertext='Preliminary Design' processid='2' start='12/11/2005' end='25/11/2005' id='Desn' color='99cc00' alpha='60' />
<task name='Product Development' processid='2' start='6/12/2005' end='2/3/2006' id='PD1' color='99cc00' alpha='60' />
<task name='Product Development' processid='3' start='6/12/2005' end='2/3/2006' id='PD2' color='99cc00' alpha='60' />
<task name='Doc Outline' hovertext='Documentation Outline' processid='2' start='6/4/2006' end='1/5/2006' id='DocOut' color='99cc00' alpha='60' />
<task name='Alpha' hovertext='Alpha Release' processid='4' start='15/3/2006' end='2/4/2006' id='alpha' color='99cc00' alpha='60' />
<task name='Beta' hovertext='Beta Release' processid='3' start='10/5/2006' end='2/6/2006' id='Beta' color='99cc00' alpha='60' />
<task name='Doc.' hovertext='Documentation' processid='4' start='12/5/2006' end='29/5/2006' id='Doc' color='99cc00' alpha='60' />
<task name='Website Design' hovertext='Website Design' processid='5' start='18/5/2006' end='22/6/2006' id='Web' color='99cc00' alpha='60' />
<task name='Release' hovertext='Product Release' processid='6' start='5/7/2006' end='29/7/2006' id='Rls' color='99cc00' alpha='60' />
<task name='Dvlp' hovertext='Development on Beta Feedback' processid='3' start='10/6/2006' end='1/7/2006' id='Dvlp' color='99cc00' alpha='60' />
<task name='QA' hovertext='QA Testing' processid='4' start='9/4/2006' end='22/4/2006' id='QA1' color='99cc00' alpha='60' />
<task name='QA2' hovertext='QA Testing-Phase 2' processid='4' start='25/6/2006' end='5/7/2006' id='QA2' color='99cc00' alpha='60' />
</tasks>
<connectors color='99cc00' thickness='2'>
<connector fromtaskid='Cpt1' totaskid='Cpt2' fromtaskconnectstart='1' />
<connector fromtaskid='PD1' totaskid='PD2' fromtaskconnectstart='1' />
<connector fromtaskid='PD1' totaskid='alpha' />
<connector fromtaskid='PD2' totaskid='alpha' />
<connector fromtaskid='DocOut' totaskid='Doc' />
<connector fromtaskid='QA1' totaskid='beta' />
<connector fromtaskid='Dvlp' totaskid='QA2' />
<connector fromtaskid='QA2' totaskid='Rls' />
</connectors>
<milestones>
<milestone date='29/7/2006' taskid='Rls' radius='10' color='333333' shape='Star' numsides='5' borderthickness='1' />
<milestone date='2/3/2006' taskid='PD1' radius='10' color='333333' shape='Star' numsides='5' borderthickness='1' />
<milestone date='2/3/2006' taskid='PD2' radius='10' color='333333' shape='Star' numsides='5' borderthickness='1' />
</milestones>
</chart>");
dataXml = xmlAppend.ToString();
}
2.异步方式(用xml格式字符)
前台html代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FusionCharts甘特图使用(异步方式展示)</title>
<script src="DependOn/FusionWidgets_XT_Charts/FusionCharts.js"></script>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script>
$(function () {
$.get("Handler/GetDataToJson.ashx", "", function (data) {
var chart = new FusionCharts("../DependOn/Charts/FCF_Gantt.swf", "chartId", "900", "400");
chart.setJSONData(data);
chart.render("chartContainer");
}, "json");
});
</script>
</head>
<body>
<div id="chartContainer">
</div>
</body>
</html>
一般处理程序代码
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
StringBuilder jsonAppend = new StringBuilder();
jsonAppend.Append("{"); //开始标记
jsonAppend.Append(""chart":");
jsonAppend.Append("{"showshadow": "0","taskbarroundradius": "4","gridbordercolor": "99CC00","basefontcolor": "333333","ganttlinealpha": "20","ganttlinecolor": "99CC00","tooltextbordercolor": "333333","tooltextbgcolor": "FFFFFF","dateformat": "dd/mm/yyyy","showtasknames": "1"},");
jsonAppend.Append(""categories": [{"fontsize": "14","isbold": "1","fontcolor": "99cc00","bgcolor": "333333","category": [{"name": "2005","end": "31/12/2005","start": "1/9/2005"},{"name": "2006","end": "31/7/2006","start": "1/1/2006"}]},");
jsonAppend.Append("{"fontsize": "10","isbold": "1","fontcolor": "333333","bgcolor": "99cc00","align": "center","bgalpha": "40","category": [{"name": "Sep","end": "30/9/2005","start": "1/9/2005"},{"name": "Oct","end": "31/10/2005","start": "1/10/2005"},{"name": "Nov","end": "30/11/2005","start": "1/11/2005"},{"name": "Dec","end": "31/12/2005","start": "1/12/2005"},{"name": "Jan","end": "31/1/2006","start": "1/1/2006"},{"name": "Feb","end": "28/2/2006","start": "1/2/2006"},{"name": "March","end": "31/3/2006","start": "1/3/2006"},{"name": "Apr","end": "30/4/2006","start": "1/4/2006"},{"name": "May","end": "31/5/2006","start": "1/5/2006"},{"name": "June","end": "30/6/2006","start": "1/6/2006"},{"name": "July","end": "31/7/2006","start": "1/7/2006"}]}],");
jsonAppend.Append(""processes": {"fontsize": "11","isbold": "1","fontcolor": "333333","bgcolor": "99cc00","align": "center","bgalpha": "40","headerfontsize": "16","headerfontcolor": "99CC00","headerbgcolor": "333333","isanimated": "1","headertext": " Leader ","positioningrid": "right","process": [{"name": "Mark","id": "1"},{"name": "Tom","id": "2"},{"name": "David","id": "3"},{"name": "Alan","id": "4"},{"name": "Adam","id": "5"},{"name": "Peter","id": "6"}]},");
jsonAppend.Append(""datatable": {"fontsize": "11","isbold": "1","fontcolor": "333333","headerfontsize": "11","headerfontcolor": "000000","showprocessname": "1","datacolumn": [{"bgcolor": "99cc00","align": "left","bgalpha": "65","headerfontsize": "16","headerfontcolor": "99cc00","headerbgcolor": "333333","headertext": " Team","headeralign": "left","width": "150","text": [{"label": " MANAGEMENT"},{"label": " PRODUCT MANAGER"},{"label": " CORE DEVELOPMENT"},{"label": " Q & A / DOC."},{"label": " WEB TEAM"},{"label": " MANAGEMENT"}]}]},");
jsonAppend.Append(""tasks": {"width": "10","task": [{"name": "Survey","end": "10/10/2005","start": "7/9/2005","id": "Srvy","toppadding": "19","alpha": "60","color": "99cc00","processid": "1","hovertext": "Market Survey"},{"name": "Concept","end": "9/11/2005","start": "25/10/2005","id": "Cpt1","alpha": "60","color": "99cc00","processid": "1","hovertext": "Develop Concept for Product"},{"name": "Concept","end": "9/11/2005","start": "25/10/2005","id": "Cpt2","alpha": "60","color": "99cc00","processid": "2","hovertext": "Develop Concept for Product","showlabel": "0"},{"name": "Design","end": "25/11/2005","start":"12/11/2005","id": "Desn","alpha": "60","color": "99cc00","processid": "2","hovertext": "Preliminary Design"},{"name": "Product Development","end": "2/3/2006","start": "6/12/2005","id": "PD1","alpha": "60","color": "99cc00","processid": "2"},{"name": "Product Development","end":"2/3/2006","start": "6/12/2005","id": "PD2","alpha": "60","color": "99cc00","processid": "3"},{"name": "Doc Outline","end": "1/5/2006","start": "6/4/2006","id": "DocOut","alpha": "60","color": "99cc00","processid": "2","hovertext": "Documentation Outline"},{"name": "Alpha","end":"2/4/2006","start": "15/3/2006","id": "alpha","alpha": "60","color": "99cc00","processid": "4","hovertext": "Alpha Release"},{"name": "Beta","end": "2/6/2006","start":"10/5/2006","id": "Beta","alpha": "60","color": "99cc00","processid": "3","hovertext": "Beta Release"},{"name": "Doc.","end": "29/5/2006","start": "12/5/2006","id": "Doc","alpha": "60","color":"99cc00","processid": "4","hovertext": "Documentation"},{"name": "Website Design","end": "22/6/2006","start": "18/5/2006","id": "Web","alpha": "60","color": "99cc00","processid": "5","hovertex": "Website Design"},{"end": "29/7/2006","start": "5/7/2006","id": "Rls","alpha": "60","color": "99cc00","processid": "6","hovertext": "Product Release"},{"name": "Dvlp","end": "1/7/2006","start": "10/6/2006","id": "Dvlp","alpha": "60","color": "99cc00","processid":"3","hovertext": "Development on Beta Feedback"},{"name": "QA","end": "22/4/2006","start": "9/4/2006","id": "QA1","alpha": "60","color": "99cc00","processid": "4","hovertext": "QA Testing"},{"name": "QA2","end": "5/7/2006","start": "25/6/2006","id": "QA2","alpha": "60","color": "99cc00","processid": "4","hovertext": "QA Testing-Phase 2"}]},");
jsonAppend.Append(""connectors": [{"color": "99cc00","thickness": "2","connector": [{"fromtaskconnectstart": "1","totaskid": "Cpt2","fromtaskid": "Cpt1"},{"fromtaskconnectstart": "1","totaskid": "PD2","fromtaskid": "PD1"},{"totaskid": "alpha","fromtaskid": "PD1"},{"totaskid": "alpha","fromtaskid": "PD2"},{"totaskid": "Doc","fromtaskid": "DocOut"}, {"totaskid": "beta","fromtaskid": "QA1"},{"totaskid": "QA2","fromtaskid": "Dvlp"},{"totaskid": "Rls","fromtaskid": "QA2"}]}],");
jsonAppend.Append(""milestones": {"milestone": [{"color": "333333","borderthickness": "1","numsides": "5","shape": "Star","radius": "10","taskid": "Rls","date": "29/7/2006"},{"color": "333333","borderthickness": "1","numsides": "5","shape": "Star","radius": "10","taskid": "PD1","date": "2/3/2006"},{"color": "333333","borderthickness": "1","numsides": "5","shape": "Star","radius": "10","taskid": "PD2","date": "2/3/2006"}]}");
jsonAppend.Append("}"); //结束标记
context.Response.Write(jsonAppend.ToString());
}
Demo下载 这个demo是模拟的数据，FusionCharts(Free版本)本身不支持json格式，异步方式的js文件是提取FusionWidgets_XT_Charts的js文件，这样就可以支持json了，