使用WebChart3D绘制雷达图

雷达图, 展现特定数据的一种图形方式.

1 如何在ColdFusion中绘制雷达图
要想在ColdFusion中绘制雷达图, 我大致设想了下, 可以通过3种方式:
A 手工绘制图形;
(不过这种方式需要Coldfusion8支持)
B 通过调用Excel的COM组件绘制;
(不过这种方式需要服务器安装高版本的Excel)
C 通过调用WebChart Java类绘制;
(这个是最合适的,ColdFusion7提供WebChart)

2 使用WebChart绘制雷达图
cfChart标签就是通过调用第3方程序WebChart进行绘制图形的, 不过cfChart只是调用了WebChart库其中的一部分:
bar, line, pyramid, area, horizontalbar,
cone, curve, cylinder, step, scatter, pie
而WebChart库还包含其它的图形模型:
• radar, bubble, dial, combo, table
这些图形我们必须通过调用java类: com.gp.api.jsp.MxServerComponent来完成.

下面给出代码来展示如何在ColdFusion中调用WebChart绘制雷达图:
<cfchart chartwidth="1" chartheight="1"/>
<cfset baseURL = "http://"& CGI.HTTP_HOST &"/">
<!--- 获取雷达图的模板文件 --->
<cfset wcp = XMLParse( ExpandPath("./radar-b.wcp") )>
<cfset chartStyle = ToString(wcp.project.style.radarChart)>
<!--- 初始化图形参数 --->
<cfsavecontent variable="chartModel">
<?xml version="1.0" encoding="UTF-8"?>
<XML type="default">
<COL>100</COL><COL>200</COL><COL>300</COL><COL>350</COL><COL>400</COL>
<ROW col0="100.0" col1="200.0" col2="100.0" col3="180.0" col4="200.0">美国:</ROW>
<ROW col0="150.0" col1="300.0" col2="250.0" col3="230.0" col4="250.0">中国:</ROW>
<ROW col0="200.0" col1="400.0" col2="400.0" col3="280.0" col4="300.0">Sample 2:</ROW>
<ROW col0="250.0" col1="500.0" col2="550.0" col3="330.0" col4="350.0">Sample 3:</ROW>
</XML>
</cfsavecontent>
<cfscript>
oMyWebChart = createObject("Java","com.gp.api.jsp.MxServerComponent");
oMyApp = getPageContext().getServletContext();
oSvr = oMyWebChart.getDefaultInstance(oMyApp);
oMyChart2 = oSvr.newImageSpec();
oMyChart2.width = 400;
oMyChart2.height= 300;
oMyChart2.type = "png";
oMyChart2.style = "#chartStyle#";
oMyChart2.model = "#chartModel#";
</cfscript>
<!--- 创建html标签 --->
<cfsavecontent variable="chartImgTag">
<cfoutput>
#oSvr.getImageTag(oMyChart2, baseURL& "CFIDE/GraphData.cfm?graphCache=wc50&graphID=")#
</cfoutput>
</cfsavecontent>
<cfset chartImgTag = replace(chartImgTag, baseURL&"Images/", baseURL, "All")>
<h2>Radar Chart</h2>
<cfoutput>#chartimgtag#</cfoutput>
通过上面的代码我们可以总结出:
A 要展现的数据必须通过XML格式文本作为参数输入;
B 我们可以设置chart的宽度,高度,输出图形格式,类型;

3 扩展思维
3.1 将实现细节隐藏
我采用的是通过自定义标签来将细节进行隐藏,将细节代码保存在文件radar.cfm中.然后我们可以在要绘制雷达图的页面中利用<cf_radarchart>这个自定义标签来调用:
<cf_radarchart width="400" height="300" type="png">
<XML>
<COL>100</COL><COL>200</COL><COL>300</COL><COL>350</COL><COL>400</COL>
<ROW col0="100.0" col1="200.0" col2="100.0" col3="180.0" col4="200.0">美国:</ROW>
<ROW col0="150.0" col1="300.0" col2="250.0" col3="230.0" col4="250.0">中国:</ROW>
<ROW col0="200.0" col1="400.0" col2="400.0" col3="280.0" col4="300.0">Sample 2:</ROW>
<ROW col0="250.0" col1="500.0" col2="550.0" col3="330.0" col4="350.0">Sample 3:</ROW>
</XML>
</cf_radarchart>
可以看到, 我们在应用的时候只要设置好所需的属性, 并将数据内容XML包含在自定义标签之间就可以了.

而在radarchart.cfm中, 我们这样设计代码的:
<cfif thisTag.ExecutionMode is 'start'>

<cfelse>
<cfchart chartwidth="1" chartheight="1"/>
<cfset baseURL = "http://"& CGI.HTTP_HOST &"/">
<cfset wcp = XMLParse( ExpandPath("./radar-b.wcp") )>
<cfset chartStyle = ToString(wcp.project.style.radarChart)>
<cfscript>
oMyWebChart = createObject("Java","com.gp.api.jsp.MxServerComponent");
oMyApp = getPageContext().getServletContext();
oSvr = oMyWebChart.getDefaultInstance(oMyApp);
oMyChart2 = oSvr.newImageSpec();
oMyChart2.width = Attributes.width;
oMyChart2.height= Attributes.height;
oMyChart2.type = Attributes.type;
oMyChart2.style = "#chartStyle#";
oMyChart2.model = thisTag.GeneratedContent;
</cfscript>
<cfsavecontent variable="chartImgTag">
<cfoutput>
#oSvr.getImageTag(oMyChart2, baseURL& "CFIDE/GraphData.cfm?graphCache=wc50&graphID=")#
</cfoutput>
</cfsavecontent>
<cfset chartImgTag = replace(chartImgTag, baseURL &"Images/", baseURL, "All")>
<cfoutput>#chartimgtag#</cfoutput>
</cfif>

3.2 WebChart绘制图形的输出格式
目前WebChart支持的输出格式包括: PNG,SWF,SVG,PDF,EPS,JPG,GIF和TIF.

3.3 开发过程中遇到的问题

3.3.1 如何解决中文乱码
当要显示的东西包括中文内容时出现乱码, 我们可以通过修改图形的模板文件*.wcp来解决. 将文件中的英文字体更换为中文字体即可. 例如: 宋体,黑体,幼圆等.

3.3.2 出现""的错误
请将自定义标签中的"<?xml version="1.0" encoding="UTF-8"?>"删除.

评论

发表评论

此博客中的热门博文

如何解决在Delphi2009中添加pas组件的问题

过去Delphi7的时代，我们写了很多.pas的单元式组件，用Install Component的方式就可以安装了。但是，在Delphi2009中这个功能被取消了。 如何解决这个问题呢？ 你可以在Delphi2009中New一个Package，然后将你的*.pas文件和相关文件（*.dcu， *.dcr，*.res) 添加到Package中，然后再Build该项目，会产生*.hpp, *.obj, *.bpi, *.lib, *.bpl 等文件。 然后，你就可以在Delphi2009中使用Install package方式安装了。 如果你的.pas文件中没有Register方法，你需要补充它： procedure Register; begin RegisterComponents('MyComponentName', [MyTypeName]); end;
阅读全文

在Delphi中操作Sap对象造成内存增长的原因

曾经在我的一个Delphi开发项目中，我遇到过这样一个问题，困扰了我相当一段时间。 我将SAP对象封装成了类，并在一个线程中调用。也就是说，SAP对象的创建释放全部是通过代码来操作的，不同于直接将SAP控件拖放到窗体上。 线程每执行一次SAP读写操作，内存就增长24K-32K。 关键代码 下面是SAP类的部分关键代码，含有SAP对象的创建和释放。 procedure TSapSvr.Open(FunctionName: string); begin if fConnect.LogOn(0, True) then begin fFunctionName := FunctionName; fFunction := fSapFunctions.Add(FunctionName); end; end; procedure TSapSvr.Close; begin fFunction := Unassigned; fSapFunctions.ReMoveAll(); fConnect.LogOff; end; 我就是在线程中不断的调用Open和Close函数，你能看出问题出在哪里吗？你肯定想不到的。 解决方案 我也是在无意中发现的，不过我现在还不知道原因，告诉你解决的方法吧！那就是将 fSapFunctions.ReMoveAll(); 删除！！！ 结束语 你能告诉我原因吗？ 附件中我提供了我封装的SAP类，分享给大家，如果发现问题，请转送一份文件给我！
阅读全文

杀死团队的七种武器（转）

不管你是一个团队的成员还是带头人，如果你对它已经厌倦了，恨不得大家早点儿散伙，不妨赶紧捡起来下面这七种武器。好吧，也许你是一片好心， 希望改变团队目前垂垂危矣的状况，病急乱投医，随便捡起一把枪，却没搞懂枪口冲着哪个方向，再加上擦枪走火，自行了断，也不是不可能。有的武器介绍之后，还有使用它的进阶技巧。让其成为项目管理、共同协作、职场发展必备之最佳利器。 　　如果当初猪八戒扔掉钉耙，而是拿起来这些的话，也许他早就回高老庄，跟高翠兰一起，从此过上快乐、幸福的生活了。 武器一：贸然加入陌生人 　　团队来了新人，不要介绍他给大家认识，不要让大家知道他的技能和长处。人们会根据他的一些细微行为做出自己的判断，而不是先去深入了解他。 要是新人的兴趣癖好跟大家完全相反，那就再好不过了。 进阶技巧： 　　把两个死对头加入到一个团队中，而且告诉大家他们的技能对于团队来说很重要。这样一来，他们之间的摩擦就会成为加速团队分裂的催化剂。 武器二：限制沟通 　　别让大家谈天，这样会增进他们的感情。不断提醒他们“你们还有活要干！”要是能在办公室里面贴上一个“静”，就再好不过。实际上，如果团队分布在不同的地方， 甚至彼此之间的文化背景都不同，效果就更好了。不到迫不得已，绝不要把一个团队的人安排在一起。不要公布通讯录。让人们的惰性发挥效果，如果想找一个人很麻烦，他就不会找了。 进阶技巧： 　　告诉团队时间紧迫，发邮件也是浪费时间。这样人们就不会发送不必要的信息了。 武器三：分清长幼尊卑 　　最佳的装备给最棒的人。最快的电脑、最好的办公室、额外的假期等等等等，只给这些精英人物。当人们看到有人可以享受特权时，嫉妒暗自滋生。基督教的七宗罪，“嫉妒”跻身其中。更美妙的是，一旦这种致命武器在团队中出现，不用人浇灌，敌意就会不断蔓延。 武器四：打人要打脸 　　每个人都有自己的弱点，找到它！把人们的弱点公开出来，并且使其个人化。要指名道姓！在表达方式上也要无所不用其极：羞辱，责怪等等，不一而足。传播方式，可以通过备忘录、邮件、会议上的发言。用红色的大字体可以加强效果。更棒的是，你还可以散布流言。要想让人信服，不妨在流言中加入一些真相，这就更有效啦。。。 进阶技巧 　　曾经有一个公司的总裁，向全公司发送了一个备忘录，其中责备了软件团队新产品的种种不足。这种做法太牛掰了！这个总裁也就成了公司的杀手，不久之后，公司成功散...
阅读全文