1、3d双柱状图页面源码如下
doublecolumn3d.html:
<!doctype html>
<!--
to change this license header, choose license headers in project properties.
to change this template file, choose tools | templates
and open the template in the editor.
-->
<html>
<head>
<title>fusioncharts 3d双柱状图</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="../script/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../script/charts/fusioncharts.js"></script>
<style type="text/css">
body{
width:99%;
height:100%;
font-size:12px;
}
#doublecolumn3dchart{
width:100%;
}
</style>
<script type="text/javascript">
$(function(){
var column3d = new fusioncharts( "../script/charts/mscolumn3d.swf", "mychartid", "100%", "520", "0" );
column3d.setxmlurl("data/doublecolumn3d.xml");
column3d.render("doublecolumn3dchart");
});
</script>
</head>
<body>
<p id="doublecolumn3dchart"></p>
</body>
</html>
2、3d双柱状图数据源
doublecolumn3d.xml:
<?xml version="1.0" encoding="utf-8"?>
<chart caption='2012年和2013年统计收入' xaxisname='月份' yaxisname='收入' showvalues='0' basefont='微软雅黑' basefontsize='14'
basefontcolor='#00ff00' outcnvbasefont='宋体' outcnvbasefontsize='16' outcnvbasefontcolor='#798777' showaboutmenuitem='1'
showlabels='1' labeldisplay='rotate ' useellipseswhenoverflow='1' rotatelabels='1' slantlabels='1' staggerlines='2'
labelstep='3' placevaluesinside='1' showyaxisvalues='1' showlimits='1' showplinevalues='1' showshadow='1' adjustp='1'
setadaptiveymin='1' centeryaxisname='1' useroundedges='1' numplines='8' plinecolor='#987989' plineisdashed='1'>
<categories>
<category label='一月' />
<category label='二月' />
<category label='三月' />
<category label='四月' />
<category label='五月' />
<category label='六月' />
<category label='七月' />
<category label='八月' />
<category label='九月' />
<category label='十月' />
<category label='十一月' />
<category label='十二月' />
</categories>
<dataset seriesname='2012'>
<set value='45155' />
<set value='12452'/>
<set value='63455' />
<set value='45233' />
<set value='95656' />
<set value='87545' />
<set value='12425' />
<set value='94633' />
<set value='85452' />
<set value='75455' />
<set value='32312' />
<set value='65625' />
</dataset>
<dataset seriesname='2013'>
<set value='65655'/>
<set value='74555'/>
<set value='61245'/>
<set value='12451'/>
<set value='95656' />
<set value='24655' />
<set value='45122' />
<set value='32656' />
<set value='65656' />
<set value='95666' />
<set value='65323' />
<set value='54656' />
</dataset>
</chart>
3、运行结果如下图
(1)初始化时
(2)点击图例2012时
(3)点击图例2013时
(4)点击图例2012和图例2013时
以上就是fusioncharts 3d双柱状图的内容。