用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了，

FusionCharts Free 甘特图的更多相关文章

  1. Twproject Gantt开源甘特图功能扩展

    1.Twproject Gantt甘特图介绍 Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CS ...

  2. 从零开始编写自己的C#框架（10）——项目实施计划与甘特图

    不知不觉本系列已经写了一个月,编码前的各项工作到此也终于结束了.回头看看这一个月走过来,白天上班晚上码字查资料,写写改改,挺不容易的.很多时候有些知识会用,知道是怎么回事,但并不等于能写出来.错别字. ...

  3. java实现甘特图的2种方法:SwiftGantt和Jfree （转）

    http://blog.sina.com.cn/s/blog_50a7c4a601009817.html 第一种方法使用SwiftGantt实现甘特图(进度图推荐这个)   import java.a ...

  4. 使用Excel 2007绘制甘特图

    本文将教大家如何使用Excel 2007制作甘特图.Excel并未提供甘特图类型,但还是可以绘制甘特图的,方法就是通过对堆积条形图类型进行自定义,使之显示任务.任务工期和层次结构. 下面的过程可帮助创 ...

  5. jquery 甘特图开发指南

    JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库. <link rel="stylesheet" href="cs ...

  6. gantt甘特图的制作过程

    甘特图主要是用来做项目管理的,可以清楚的看到任务间的逻辑关系,任务与时间关系和任务间并行关系. 在甘特图中,横轴方向表示时间,纵轴方向并列着活动列表.图表内可以用线条.数字.文字代号等来表示计划(实际 ...

  7. JS中可拖拽的甘特图和流程图

    甘特图: https://www.douban.com/note/441706674/ https://www.uedsc.com/jquery-ganttview.html https://gith ...

  8. WindowsForm如何实现类似微软project软件的甘特图？

    在管理软件研发过程中,特别是涉及项目管理或者生产计划方面,都需要一款类似微软project的控件对项目下的分解任务进行图形展示(甘特图).下面介绍一下在WindowsForm下如何实现类似微软proj ...

  9. 一款开源且功能强大的C#甘特图控件.NET Winforms Gantt Chart Control

    甘特图在项目管理中非常重要,甘特图的思想比较简单,即以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间.它直观地表明任务计划在什么时候进行,及实际进展与计划要求的对比.管理 ...

随机推荐

  1. TCP11种状态

    2.全部11种状态 2.1.客户端独有的:(1)SYN_SENT (2)FIN_WAIT1 (3)FIN_WAIT2 (4)CLOSING (5)TIME_WAIT . 2.2.服务器独有的:(1)L ...

  2. AngularJS中使用Directive、Controller、Service

    AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...

  3. ios构造和析构

    遵循规则: 构造先父类后子类 析构先子类后父类 所以,自定义的init函数需要首先[super init....] dealloc中[super dealloc]却是放在最后的 - (id)initW ...

  4. android清除缓存为什么总是存在12k？

    转载请注明出处:http://blog.csdn.net/droyon/article/details/41116529 android手机在4.2之后.清除缓存总是会残留12k的大小.预计强迫症患者 ...

  5. solr 最佳实践

    管理页面 页面地址:http://{ip}:{port}/solr/#/ 管理页面的data-import页可以手动重建索引,configuration指定了数据源,重建索引也可以通过http请求触发 ...

  6. [c++菜鸟]《Accelerate C++》读书笔记

    第0章 开始学习C++ 1.<<的行为取决于它的操作数类型,<<会把它的右操作数的字符写到左操作数所指示的流中,他是结果就是它的左操作数. 2.std::endl是一个控制器, ...

  7. PS 如何制作眼泪效果

    1.用钢笔工具勾出眼泪的路径然后按Ctrl + Enter转为选区 2.按Ctrl + J 把选区复制出来,执行滤镜 > 扭曲 > 球面化 同样的方法制作流出的眼泪,然后添加图层样式选择投 ...

  8. spring security开发步骤

    1.web.xml中加载spring ,spring security 2.spring security配置文件中配置好.... 3.自己写一个myFilter代替原有的FilterSecurity ...

  9. Spring集成JDBC

    不同spring版本合成的方式,有时候不一样,需要查看帮助文档来看如何集成,帮助文档在spring发行包中. 1.导入spring的包(这里吧Spring-3.1.3 Release的所有jar包都导 ...

  10. 数据结构与算法——AVL树类的C++实现

    关于AVL树的简单介绍能够參考:数据结构与算法--AVL树简单介绍 关于二叉搜索树(也称为二叉查找树)能够參考:数据结构与算法--二叉查找树类的C++实现 AVL-tree是一个"加上了额外 ...