FusionCharts-堆栈图、xml格式、刷新数据、添加事件link、传参

*起因*

本来想用Chart.js来搞图表的，

但是来了个新需求，想搞的华丽点，毕竟对Chart.js来说，实现有点难度，

*做出的改变*

最终选择了FusionCharts，

*难点*

网上关于FusionCharts的一些资源也比较多，但是官网上的API没有找到，

并且一般介绍的都是饼状图，柱状图，而我想搞的是堆栈图，所以找来找去，最终找到了一个介绍堆栈图的地方↓

http://www.cnblogs.com/know/archive/2012/10/09/2716599.html

在上面的博客上下载下来demo，终于看到了我需要的堆栈图需要的xml格式的文件！！

<?xml version="1.0" encoding="utf-8" ?>
<chart palette="2" caption="Product Comparison" shownames="1" showvalues="0" numberPrefix="$" showSum="1" decimals="0" useRoundEdges="1" ><categories><category label="Product A" /><category label="Product B" /><category label="Product C" /><category label="Product D" /><category label="Product E" /></categories><dataset seriesName="2004" color="AFD8F8" showValues="0"><set value="25601.34" /><set value="20148.82" /><set value="17372.76" /><set value="35407.15" /><set value="38105.68" /></dataset><dataset seriesName="2005" color="F6BD0F" showValues="0"><set value="57401.85" /><set value="41941.19" /><set value="45263.37" /><set value="117320.16" /><set value="114845.27" /></dataset><dataset seriesName="2006" color="8BBA00" showValues="0"><set value="45000.65" /><set value="44835.76" /><set value="18722.18" /><set value="77557.31" /><set value="92633.68" /></dataset>
</chart>

 改了下下载下来demo中的函数：

/*画图通用函数*/
/****画图(以指定 xml格式文件为数据源)  *xmlType        =>xml文件的格式[xml字符串||xml文件]*divId          =>页面div的ID*flashFileName  =>Flash的名称,在FusionCharts文件夹下的.swf文件*width          =>Flash画布的宽度*height         =>Flash画布的高度*xmlUrl         =>根据xml文件的格式[xml字符串||xml文件],来确定传入文件路径还是xml字符串
*/
function DrawChart(xmlType, divId, flashFileName, width, height, data) {var myChartId = new Date().getTime();var myChart = new FusionCharts("../js/FusionCharts/" + flashFileName, myChartId, width, height);if (xmlType == "file") {//判断xml的类型myChart.setDataURL(data); //获取xml文件的数据源
    }else if (xmlType == "str") {myChart.setDataXML(data); //获取xml格式数据源} else {console.log("main.js 中的DrawChart函数中的xmlType不在选择范围内");}myChart.render(divId);
}

HTML中：

<div id="id_source"></div>
<div id="id_chart_business"></div>

JS调用：

　　/*xml文件调用*/    
　　DrawChart("file", "id_source", "StackedColumn2D.swf", "650", "450", "../js/FusionCharts/TestData/StackedBar.xml");/*xml字符串调用*/
　　//这里的问题比较多,chart中一个标签写不对，貌似就不能显示出图表!!!有几个标签我都是一个个去试验是否能存在，存在的效果...
　　//还有拼接字符串的时候，我本来是用var data_business = '<chart shownames="1"><set value="99" label="项目0" color="0000FF"/>'，
　　//即，整个xml串用单引号包起来，标签值用双引号还是报错，看了下生成的源码，原因是标签值的双引号，在生成的源码中会截断html中其它标签的代码，毕竟html代码一般都是双引号的（自己查看下生成的代码就可以看出来了）， 
var data_business = "<chart shownames='1' showvalues='1' showSum='1' decimals='0' useRoundEdges='1' caption='业务' numberPrefix='' showBorder='0' borderThickness='0' borderColor='#EEEEEE' bgColor='#EEEEEE' >";data_business += "<set value='99' label='项目0' color='0000FF'/><set value='59' label='项目1' color='0000FF'/><set value='80' label='项目2' color='0000FF'/>";data_business += "<set value='150' label='项目3' color='0000FF'/><set value='40' label='项目4' color='0000FF'/><set value='60' label='项目5' color='0000FF'/>";data_business += "</chart>";//data_business = "<chart caption='8888' numberPrefix='$'><set value='25' label='Item A' color='AFD8F8' /><set value='25' label='Item A' color='AFD8F8' /><set value='25' label='Item A' color='AFD8F8' /><set value='25' label='Item A' color='AFD8F8' /><set value='25' label='Item A' color='AFD8F8' /></chart>";DrawChart("str", "id_chart_business", "Column2D.swf", "650", "450", data_business);

 *刷新*

本来读取的一个xml文件，但是发现一个情况：更改了xml的数据，但是刷新页面，页面中的图中的数据并没有实时刷新，缓存？Ctrl + F5还是不行，

最后搜了一下，解决方案也很简单，和Ajax处理缓存的方式一样，直接更改函数了（注意标红的js代码）：

/*画图通用函数*/
/****画图(以指定 xml格式文件为数据源)  *xmlType        =>xml文件的格式[xml字符串||xml文件]*divId          =>页面div的ID*flashFileName  =>Flash的名称,在FusionCharts文件夹下的.swf文件*width          =>Flash画布的宽度*height         =>Flash画布的高度*xmlUrl         =>根据xml文件的格式[xml字符串||xml文件],来确定传入文件路径还是xml字符串
*/
function DrawChart(xmlType, divId, flashFileName, width, height, data) {var myChartId = new Date().getTime();var myChart = new FusionCharts("../js/FusionCharts/" + flashFileName, myChartId, width, height);if (xmlType == "file") {//判断xml的类型myChart.setDataURL(data + "?t=" + new Date().getTime()); //获取xml文件的数据源，标红的用于数据的刷新
    }else if (xmlType == "str") {myChart.setDataXML(data + "?t=" + new Date().getTime()); //获取xml格式数据源，标红的用于数据的刷新} else {console.log("main.js 中的DrawChart函数中的xmlType不在选择范围内");}myChart.render(divId);
}

 *XML文件和xml字符串的不同*

本来xml文件中的内容为：（即用setDataURL来读取数据）

<?xml version="1.0" encoding="utf-8" ?>
<chart palette="2" showBorder="0" borderThickness="0" borderColor="#EEEEEE" bgColor="#EEEEEE" bgAlpha="100%" caption="业务" shownames="1" showvalues="0" numberPrefix="" showSum="1" decimals="0" useRoundEdges="1" ><categories><category label="测试数据" /></categories><dataset seriesName="好评" color="FF0000" showValues="0"><set value="3000" /></dataset><dataset seriesName="中评" color="FFFF00" showValues="0"><set value="999" /></dataset><dataset seriesName="差评" color="000000" showValues="0"><set value="150" /></dataset>
</chart>

注意标黄的标签：bgAlpha

在我将这些文本复制为xml字符串的时候（去掉头部xml的版本和编码信息）↓（即用setDataXML来读取数据）

 

<chart palette='2' showBorder='0' borderThickness='0' borderColor='#EEEEEE' bgColor='#EEEEEE' bgAlpha='100%' caption='业务' shownames='1' showvalues='0' numberPrefix='' showSum='1' decimals='0' useRoundEdges='1' ><categories><category label='测试数据' /></categories><dataset seriesName='好评' color='FF0000' showValues='0'><set value='3000' /></dataset><dataset seriesName='中评' color='FFFF00' showValues='0'><set value='999' />
</dataset><dataset seriesName='差评' color='000000' showValues='0'><set value='150' /></dataset></chart>

成的图表提示错误：‘Invalid XMLdata.’

排查 了下其它问题，最终得出结论可能是标签错误，通过排查bgAlpha在xml文件中可以有，但是setDataXML的时候不可以存在的；

 *图形上添加事件，比如点击事件、事件的传参问题*

<set value='1000' link='JavaScript:yourFunctionName();' />

如果想传参数的话，如果类型是Number，可以的，

但是如果想传String类型的话，比较恶心了，设计单引号的问题；

我目前的解决方案是将String建为枚举类型；

 

 

 

写在最后↓

→FusionCharts文档不太全，各种坑，能换个别的画图形的库还是换个别的库吧，比如：ECharts