FusionCharts-堆栈图、xml格式、刷新数据、添加事件link、传参
2016-12-08 11:51
92 查看
*起因*
本来想用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
相关文章推荐
- RecyclerView展示固定数据、上拉加载更多、下拉刷新、点击事件、长按点击事件、删除条目、刷新条目、添加条目、多条目加载
- [转]使用showModalDialog打开模态窗口添加数据后刷新原窗口
- Struts中禁止刷新Action重复添加数据
- gridview中button添加事件以及获取点击button那行的索引和数据
- 以申购单为实例,讲解Jquery动态删减行,新增行添加鼠标事件,子窗口与父窗口传值,自动计算金额,及输入值的验证,前台数据批量提交到后台action
- 学习篇:无刷新展示数据+分页+添加+修改+删除
- 无刷新动态添加下列条数据
- 【swing】jtree的数据绑定,使用,美化,事件及ui的刷新
- DataGridView数据绑定控件---------按钮添加和事件触发总结
- DataGridView数据绑定控件---------按钮添加和事件触发总结
- 仅对具有 DataBinding 事件的对象提供数据绑定表达式支持。System.Web.UI.WebControls.HyperLinkField 没有 DataBinding 事件。
- ListView控件刷新函数(添加,删除,修改数据时刷新)
- 怎样为数据控件Itemtemplate内的控件添加事件[ASP.NET]
- ajax实现为table添加数据定时刷新
- 激发按钮点击事件为listview中添加数据
- 使用showModalDialog打开模态窗口添加数据后刷新原窗口
- 添加修改后在datagridview里刷新数据,不是从数据库。用标识,跳转。(用于百万数据集)
- Flex利用自定义事件使用弹出窗口为DataGrid添加新数据
- 如何防止在listbox中添加很多数据出现不停的刷新
- fusioncharts 图表中添加事件