FusionCharts製作3D柱狀圖和折線圖
阿新 • • 發佈:2018-12-05
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <script type="text/javascript" src="static/FusionCharts.js"></script> <script type="text/javascript" src="static/jquery.js"></script> <script> //雙摺線圖 //var swf="static/MSLine.swf"; //雙柱狀圖 var swf = "static/MSColumn3D.swf"; $(function() { var chartObj = new FusionCharts(swf, 'chart', '700', '350'); chartObj.setDataURL("Data.xml"); chartObj.render('mychart'); }); </script> <div id="mychart"></div>
xml檔案例項:
<?xml version="1.0" encoding="GBK"?> <graph caption='xxxxxxxx情況表' xAxisName="xxxxxx名稱" yAxisName='xxxx' baseFontSize="12" showValues="0" decimalPrecision="1" subcaption='2018-12-05' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' showvalues='0' numdivlines='3' numVdivlines='0' labelDisplay="ROTATE" slantLabels="1" yaxisminvalue='0' yaxismaxvalue='18' rotateNames='0'> <categories> <category name='ceshi1' /> <category name='ceshi2' /> <category name='ceshi3' /> <category name='ceshi4' /> <category name='ceshi5' /> <category name='ceshi6' /> <category name='ceshi7' /> <category name='ceshi8' /> <category name='ceshi9' /> <category name='ceshi10' /> <category name='ceshi11' /> <category name='ceshi12' /> <category name='ceshi13' /> <category name='ceshi14' /> <category name='ceshi15' /> </categories> <dataset seriesName='xxxxx數量' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'> <set value='2' /> <set value='8' /> <set value='3' /> <set value='2' /> <set value='1' /> <set value='2' /> <set value='7' /> <set value='12' /> <set value='1' /> <set value='2' /> <set value='1' /> <set value='1' /> <set value='1' /> <set value='2' /> <set value='2' /> </dataset> <dataset seriesName='xxxxx數量' color='F1683C' anchorBorderColor='F1683C' anchorBgColor='F1683C'> <set value='0' /> <set value='5' /> <set value='1' /> <set value='0' /> <set value='0' /> <set value='0' /> <set value='1' /> <set value='0' /> <set value='0' /> <set value='1' /> <set value='0' /> <set value='1' /> <set value='0' /> <set value='2' /> <set value='2' /> </dataset> </graph>
效果圖: