This article mainly introduces the 3D double histogram effect drawn by the jQuery plug-in FusionCharts, and involves the related operating skills of the 3D double histogram drawn by jQuery using the plug-in FusionCharts combined with xml data. Friends in need can refer to it. I hope it can help everyone.
1. The source code of the 3D double column chart page is as follows
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FusionCharts 3D双柱状图</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script> <script type="text/javascript"> $(function(){ var column3D = new FusionCharts( "FusionCharts/MSColumn3D.swf", "myChartId", "100%", "520", "0" ); column3D.setXMLUrl("doubleColumn3D.xml"); column3D.render("doubleColumn3DChart"); }); </script> </head> <body> <p id="doubleColumn3DChart"></p> </body> </html>
2. The 3D double column chart data source doubleColumn3D.xml:
<?xml version="1.0" encoding="UTF-8"?> <chart caption='(jb51.net统计)2015年和2016年统计收入' 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='2015'> <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='2016'> <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. The running result is as shown below
Related recommendations:
##FusionCharts 3D Double Bar Chart
Three.js implementation of 3D map example sharing
Example detailed explanation of HTML5 and CSS3 to achieve 3D conversion effect
The above is the detailed content of 3D double bar chart drawn by jQuery plug-in FusionCharts. For more information, please follow other related articles on the PHP Chinese website!