用FusionCharts做了个小例子。
什么事开始都不会是顺利的。
这时候需要大家淡定。
废话不能多说。这是原则。
首先在eclipse下建了个project。
当然因为这个小例子比较简单,不需要放在project中。你完全可以在自己的PC里建个文件夹放进去。
charts文件夹里放了FunsionCharts的swf,关于FunsionCharts这里就不多介绍了。可以去看官方文档或者网上的一些使用说明。推荐播客http://www.cnblogs.com/atree/archive/2010/06/01/FusionCharts-Free-MyFirstChart.html
另一个文件夹放了两个文件
代码如下:
Data.xml
<?xml version="1.0" encoding="UTF-8"?> <graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'> <set name='一月' value='462' color='AFD8F8'/> <set name='二月' value='857' color='F6BD0F'/> <set name='三月' value='671' color='8BBA00'/> <set name='四月' value='494' color='FF8E46'/> <set name='五月' value='761' color='008E8E'/> <set name='六月' value='960' color='D64646'/> <set name='七月' value='629' color='8E468E'/> <set name='八月' value='622' color='588526'/> <set name='九月' value='376' color='B3AA00'/> <set name='十月' value='494' color='008ED6'/> <set name='十一月' value='761' color='9D080D'/> <set name='十二月' value='960' color='A186BE'/> </graph>
Charts.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body bgcolor="#ffffff"> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D"> <param name="movie" value="../FusionCharts/FCF_Column3D.swf"/> <param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500"> <param name="quality" value="high"/> <embed src="../charts/Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/> </object> </body> </html>
然后打开Data.html,满心欢喜的看到了柱状图。
可惜。
乱码了。
然后从网上了解到
如果程序是调用静态的xml文件,这个时候出问题的情况就很多了。
这时分两种情况,第一种情况是这个静态的xml文件是你自己动态生成的:那么在你动态生成的时候你需要保存为gbk格式的文件,而非utf-8格式的文件,这样中文就不会有乱码了。第二种情况是这个文件是你拿官方的xml文件改编的:那么你需要把此文件另存为gbk格式的文件,就OK了
然后我把data.xml文件头中的
<?xml version="1.0" encoding="UTF-8"?>
替换为
<?xml version="1.0" encoding="GB18030"?>
问题解决了。显示出了可爱的中文。
==================================================================================
下面附上前人总结:
常见中文乱码问题
来自http://wangyaobeijing.blog.163.com/blog/static/158330320118149753377/
在实际工作中刚开始遇到最多的问题就是中文乱码问题,这也是我收到的邮件中朋友们遇到的最多的问题。今天我就在这里总结一下通用的处理方案。希望能对大家有所帮助。
一.调用动态的xml字符串
如果程序是访问动态的xml字符串,这个时候出问题的情况很少,因为生成动态xml字符串的过程中一直保持utf-8状态就OK了。
二.调用静态的xml文件
如果程序是调用静态的xml文件,这个时候出问题的情况就很多了。从我收到的邮件中,大部分都是访问静态的xml文件,也是出问题最多的情况。 这时分两种情况,第一种情况是这个静态的xml文件是你自己动态生成的:那么在你动态生成的时候你需要保存为gbk格式的文件,而非utf-8格式的文件,这样中文就不会有乱码了。第二种情况是这个文件是你拿官方的xml文件改编的:那么你需要把此文件另存为gbk格式的文件,就OK了。
三.link传参出现乱码问题
例:link="JavaScript:myJSFunction('USA', 235);"
link="JavaScript:myJSFunction('中文', 235);"//此时中文会出现乱码
这是一个网友给我发邮件时遇到的问题,其实之前我没有遇见过此问题,因为我之前用到的link里面都只传了数字或英文的参数,还没有传过中文参数。后来我就自己测试了一下,确实存在此问题,无论用何种方式在何种地方去转码都无法解决此问题。我当时也不知道解决方案,过了几个小时脑袋突然灵光一闪,记得自己好像在FusionCharts的官方文档里看到过关于link的文章。那个周六,我花了半天时间把FusionCharts V3.1 API文档,从头到尾翻看了3遍,还是没找到。我当时很郁闷啊,还是不甘心,然后我就在FusionCharts V3.2 API上面
找。终于功夫不负苦心人,让我给找到了。见图:
原文如下。
Note: Internally the chart decodes a Url that you set as link. Before invoking the link it again encodes the Url. If you are passing multilingual characters via a Url or do not want this decode-encode mechanism to be handled by chart you can set unescapeLinks='0' in <chart> element of the chart's XML data。 就是说你在xml文件的chart属性中添加 unescapeLinks='0' ,那你的js乱码问题就轻松解决啦。 四. 结束语
以上遇到的乱码问题,应该是FusionCharts中文乱码的常见问题。如果还有其他的问题,以及类似问题的其他解决方案,请email给我,谢谢。
最后还是鼓励大家多看官方文档,虽然我个人觉得V3.1 API比V3.2 API做的好,但V3.2 API里面有很多新东西,大家还是要多看。
以上内容参考文献:FusionChartsV3.1 API && FusionChartsV3.2 API
四FusionCharts网页乱码
2010-12-15 11:16:12| 分类: Fusioncharts | 标签: |字号大中小 订阅
尘归尘,土归土,乱码应归垃圾桶。这篇文章就是来彻底终结FusionCharts中文乱码问题的! 通常而言,FusionCharts的中文乱码其实还并不太常见,比如,你将FusionCharts随带的例子中的xml文件中的某一英文改为中文(比如Pie3D.html),运行后,中文其实是可以显示的。但你也可能注意到,在这种方式下,是直接从硬盘读取的xml文件,也就是你每次显示一次Flash图表,都要进行一次I/O操作,很显然,这种方式肯定是不大好的,所以你很可能就想到了一
次性将xml读取出来放在内存里或是就放在页面的一个隐含参数里(比如type=hidden的隐含参数),那么这个时候,中文乱码就产生了!
现在我们不采用直接读取xml文件的形式,而是将读取的xml文本存储在页面一个隐含参数中,如(注:将采用jsp的形式,其他语言都是类似的):
<div name="chartXml"
style="display:none"><%=chartXml%></div>
而chartXml就是xml文本,与xml文件中的内容是一致的,例如:
<chart caption=’月销售汇总’ subcaption=’2006年’ formatNumberScale=’0′ xAxisName=’Month’ yAxisName=’Sales’ yAxisMinValue=’15000′ numberPrefix=’a’ numberSuffix=’b’
showValues=’1′
alternateHGridColor=’FCB541′
alternateHGridAlpha=’20′
divLineColor=’FCB541′
divLineAlpha=’50′
canvasBorderColor=’666666′ baseFontColor=’666666′ lineColor=’FCB541′ > <set label=’Jan’ value=’17400′ /> <set label=’Feb’ value=’19800′ /> <set label=’Mar’ value=’21800′ /> <set label=’Apr’ value=’23800′ /> <set label=’May’ value=’29600′ /> <set label=’Jun’ value=’27600′ />
<set label=’test2′ title=’test’ hint=”test” value=’31800′ /> <set label=’Aug’ value=’39700′ /> <set label=’Sep’ value=’37800′ /> <set label=’Oct’ value=’21900′ /> <set label=’Nov’ value=’32900′ /> <set label=’Dec’ value=’39800′ /> <styles> <definition>
<style name=’Anim1′ type=’animation’ param=’_xscale’ start=’0′ duration=’1′ /> <style name=’Anim2′ type=’animation’ param=’_alpha’ start=’0′ duration=’0.6′ /> <style name=’DataShadow’ type=’Shadow’ alpha=’40′/> </definition> <application>
<apply toObject=’DIVLINES’ styles=’Anim1′ /> <apply toObject=’HGRID’ styles=’Anim2′ />
<apply toObject=’DATALABELS’ styles=’DataShadow,Anim2′ /> </application> </styles> </chart>
调用显示的地方为:
<script type=“text/javascript”>
var chart = new FusionCharts(“FusionCharts/Pie3D.swf “, “ChartId”, “100%”, “300″, “0″, “0″ );
var chartXMLObj = document.getElementById(“chartXml”); var chartXML = chartXMLObj.innerHTML; //解决中文乱码的最关键一行
//有时,如果没有这一行,可能也不会有乱码 //但大多数时候会有乱码,所以这行一定不能掉 //encodeURI是对chartXML进行编码 chartXML = encodeURI(chartXML); chart.setDataXML(chartXML); </script>
这种方式我认为可以解决FusionCharts所有的中文乱码问题。