fushionchart

http://www.fusioncharts.com/demos/gallery/#stacked-charts 官网

fusionCharts 中文乱码问题

静态的数据

    1.打开xml文件，另存 ，采用“utf-8”的编码格式进行另存。

动态的数据

    1.采用setDataURL的格式，进行动态数据的获取

       a.如果传递的url中包含参数，必须使用FusionChartsHelper.encodeDataURL（URL）进行url编码，在返会的url字符串要用java.net.urlEncode 进行编码（对于向flash中传递参数的时候，或者只能取到参数列表中的第一个参数）。

            （对URL中的参数要使用urlEncode 进行编码，两次   ，在获取url中的参数的时候，要先用URLDecode解码，再对获得参数进行字符编码转换 ISO8859-1 ----->UTF-8）

        b.返回的xml字符串response.setContentType("text/xml;charset=GBK");

（全文编码格式为UTF-8）    

 

fusioncharts 直接显示数值

只要在dataset标签中设置：showValues = "1"就可以了。

 

<dataset seriesName= ”费用总额" color="FF0000" showValues="1">"

fushionCharts 修改提示no data to display

解决方案一、

 var myChart = new FusionCharts（）；

 myChart2.configure( "ChartNoDataText", "没有显示的数据");

解决方案二、

 var myChart = new FusionCharts("../FusionCharts/Column2D.swf?ChartNoDataText=无数据显示", "myChartId", "600", "300");

http://www.fusioncharts.com/demos/gallery/#stacked-charts

fusionCharts 饼图不显示百分比

在graph标签里面，添加  showPercentValues="1"这样就会在饼图上显示百分比了，虽然可以显示百分比，但它会把原来的数值给替换掉，就是数值和百分比只能显示一个，这时候可以用另一个办法，在 

<set name="在这里加入数值" >。

fushioncharts 饼图数值和百分比互换位置

简单的做法：

 

1、在graph标签中加入showPercentValues="1" ，即可以显示百分比

 

<graph caption="费用总额(单位:元)" bgcolor="F3f3f3"

 xAxisName="地区" yAxisName="费用总额"

 showValues="1" showPercentValues="1" 

numberPrefix="" showNames="1" 

decimalPrecision="1" formatNumberScale="1" baseFontSize="12"  >

 

2、鼠标悬停的时候显示数值：

 

这个比较简单，因为在 set标签中，有一个属性：toolText=”自定义悬停需要显示的内容”。

 

本文来自：http://www.cnblogs.com/smile361/archive/2012/10/31/2747614.html，这人写的非常好。

 

在应用FusionCharts的过程中，可能会出现页面的Div层被flash遮住的情况，笔者在应用的过程中就出现过这样的情况，当时是一个日期控件被FusionCharts的flash挡住了，这个问题的解决方式其实也很简单。

 

我们知道要使一个普通的flash保持透明的设置是将flash的属性transparent设为wmode，但在FusionCharts中并不能直接设置统计用的flash，不过令人高兴的是，FusionCharts在它的js文件中提供了设置的地方，打开FusionCharts.js，大约在30几行的地方，可以看到类似this.addParam(‘allowScriptAccess’, ‘always’);等这样的设置例子语句，这里就是设置flash属性的地方了，加上一句：

this.addParam('wmode', 'transparent');

就行了！除此以外，我们还发现有个设置’transparent’的方法，就是

setTransparent: function(isTransparent)

同样，我们也可以通过调用setTransparent(true)来达到flash透明的目的。

 

div的图层由div的style中的z-index来决定，z-index是层垂直屏幕的坐标，0最小，越大的话位置越靠上。

由于FusionCharts的图表都放在div中，如果页面还有其他的div，将被FusionCharts的图层挡住。不过设置z-index并不起作用，其他的div仍然被挡住。经过网络上查找，发现原来是这样的：

flash的图默认情况下总是位于最上层，参考下面的文档：

<param name="WMODE" value="transparent">

<param name="wmode" value="Opaque">

<param name="wmode" value="Window">

NOTE: 支持其它浏览器(firefox opera etc.) 则使用 <embed wmode="transparent" />在embed节点中加入wmode值.

window 模式

默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只 是貌似显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮 住位置与他重合的所有DHTML层。

 

这里如果有不明确的地方，可以这样说，flash的显示的内容实际是显示在自己的窗口中，就类似你的qq窗口，它们都是基于windows/其他系统的，而不是ie浏览器，所以她永远是显示在最前面，会遮挡住嵌套在页面中的div。

但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上，但当flash影片播放时会出现比较诡异的现象，比如DHTML层像被flash刮掉一块一样显示异常。

Opaque 模式

这是一种无窗口模式，在这种情况下flash player没有自己的窗口句柄，这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。

Transparent 模式

透明模式，在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象，同样你也可以使用z-index来控制flash影片的深度值，但是与Opaque模式不同的是这样做会降低flash影片的回放效果，而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。

了解了各种模式的实现方式和意义在以后的开发中就可以按照具体情况选择设置wmode属性的值了。

 

所以只要将flash的wmode设置成opaque就行了。所以在页面加载FusionCharts图表时，修改参数wmode，在页面上加载flash的js代码中加上这句 chart.addParam("wmode","Opaque");就可以了

 

fusionCharts invalid data xml以及字符串拼接不显示问题

1、在用FusionChart时，通过chart.setDataURL("../sourceData.xml")读取xml，

最终在运行后显示错误“invalid data xml”出现这个错误的原因是因为xml文件不可用，

如果确定文件格式正确、没有出现不必要的空格等，

多半是因为中文编码的原因，可以将xml文件中的所有汉字换成英文试试，

应该就能显示报表图了。这样再解决乱码的问题，中文编码乱码还在解决中……

 

 

2、fusionCharts free有两个传值方法，（用错方法也可能会导致不显示的问题）

 

a、如果是xml文件，请用chart.setDataURL("xml文件路径");

b、如果是字符串，  请用 chart.setDataXML("字符串变量");

 

eg：

    chart.setDataURL("<%=request.getContextPath()%>/basejs/fusionCharts/data.xml");
   var dataXml = “”；
    chart.setDataXML(dataXml);

 

 

 

-- 一下是别人的观点，供参考：

fusioncharts free，这是一个漂亮好用的flash报表工具。

基本使用请参考薄荷的博客

在这里分享一下我使用的经验！！！

我是针对jsp 的开发，加载了com.infosoftglobal.fusioncharts包，使用了FusionChartsCreator类。

在这个类里有四个方法，我主要应用的方法是：

    public static String createChartHTML(String chartSWF, String strURL,String strXML, String chartId, int chartWidth, int chartHeight,boolean debugMode)

还有一个类似方法，只不过多了一个参数registerWithJS，这个好像是设置是否导入js文件的，我还没仔细研究，我设置为false。public static String createChart(String chartSWF, String strURL,String strXML, String chartId, int chartWidth, int chartHeight,boolean debugMode, boolean registerWithJS)

jsp页面参考  

......

<import="com.infosoftglobal.fusioncharts.FusionChartsCreator"%>

<html>

<head>......</head>

<%
...... 
 String chartCode = "";
 String outxml = (String)request.getAttribute("outxml");
        
 if(outxml == null || outxml.equals("")) {
     chartCode=FusionChartsCreator.createChartHTML("../../../Charts/MSColumn3D.swf","../../../Data/MSColumn3D.xml" , "", "myNext", 800, 400, false);
 }else{ 
     chartCode=FusionChartsCreator.createChartHTML("../../../Charts/MSColumn3D.swf", "",outxml , "myNext", 800, 400, false);
 }

%>

<body>

......

<table>
      <%=chartCode%>
 </table>

</body>
</html>

 
 

在上面两个方法里都有strURL和strXML两个参数，其中strURL是要读取的xml文件的路径，strXML是要读取的xml字符串。

这两个参数不能同时有值，如果想从文件中读取xml数据，就要把strXML设置为""；如果要从字符串中读取xml数据，那就要把strURL设置为""。

xml文件数据并不好用，经常数据更新后不能立即在图表上体现，往往需要清除浏览器缓存后才能生效，所以推荐使用字符串传xml数据。

而传的字符串的格式一定要注意，该字符串与xml文件中的文本不完全相同。

xml文件 <?xml version="1.0" encoding="UTF-8"?>
<chart caption=''test'' xAxisName=''Month'' yAxisName=''Units'' showValues=''0'' decimals=''0'' formatNumberScale=''0''>
 <set label=''Jan'' value=''462'' />
 <set label=''Feb'' value=''857'' />
 <set label=''Mar'' value=''671'' />
 <set label=''Apr'' value=''494'' />
 <set label=''May'' value=''761'' />
 <set label=''Jun'' value=''960'' />
 <set label=''Jul'' value=''629'' />
 <set label=''Aug'' value=''622'' />
 <set label=''Sep'' value=''376'' />
 <set label=''Oct'' value=''494'' />
 <set label=''Nov'' value=''761'' />
 <set label=''Dec'' value=''960'' />
</chart>

 
 

 而相应的strXML = "<chart caption=''test'' xAxisName=''Month'' yAxisName=''Units'' showValues=''0'' decimals=''0'' formatNumberScale=''0''><set label=''Jan'' value=''462'' /><set label=''Feb'' value=''857'' /><set label=''Mar'' value=''671'' /><set label=''Apr'' value=''494'' /><set label=''May'' value=''761'' /><set label=''Jun'' value=''960'' /><set label=''Jul'' value=''629'' /><set label=''Aug'' value=''622'' /><set label=''Sep'' value=''376'' /><set label=''Oct'' value=''494'' /><set label=''Nov'' value=''761'' /><set label=''Dec'' value=''960'' /></chart>"。

我最初拼装xml数据时是用的jdom来做的，但是拼装出来的数据和这里所要求的数据总是有差别。

所以，我后来就直接用字符串来拼装数据了。

在拼装时要注意：

        开头的<?xml version="1.0" encoding="UTF-8"?>不要；

        整个字符串前后和中间都不能有换行符或空格；

        而且元素属性的值一定要用''''括起来，不要用""。