优点:通过fusionchart能绘制具有flash动态效果的报表图像。
前提:Fusioncharts.js,MSColumn2D.swf,这是所需要的。关于fusionchart,不多说,网上可以查到详细的分析和例子,这里只写出最近本人亲自的一个小例子。
说下流程,用的是ajax请求,后台生成一个funsionchart认识的一些标签元素,然后返回结果时,交由Fusioncharts.js这个包装好的js处理,其有两个方法,具体代码如:
var chart = new FusionCharts(baseUrl+'/charts/MSColumn2D.swf+'?ChartNoDataText=正在加载数据...', "ChartId", "100%", divHeight, "0", "1");
chart.setDataXML(result.data);<!--result.data为ajax返回数据,就是后台生成的chart标签-->
chart.render("LeftContainer");<!--LeftContainer,为显示效果的容器,本人用的的是div-->
生成的标签大致如下,即ajax返回的数据
<chart xAxisName='药品名' yAxisName='库存数量' caption='药品库存统计图' baseFontSize='12' shownames='1' showvalues='1' useRoundEdges='1'>
<categories>
<category label='双黄连颗粒'/>
<category label='葛根素'/>
<category label='双氯芬酸钾'/>
<category label='罗红霉素'/>
</categories>
<dataset seriesName='剩余量' color='AFD8F8'>
<set value='100'/>
<set value='100'/>
<set value='100'/>
<set value='100'/>
</dataset>
<dataset seriesName='最小量' color='F6BD0F'>
<set value='1000'/>
<set value='1000'/>
<set value='1000'/>
<set value='1000'/>
</dataset>
</chart>
效果图如下:
通过图和代码的对照,很容易能够得出fusionchart绘图的一些属性设置。