1. 程式人生 > >FusionCharts製作3D柱狀圖和折線圖

FusionCharts製作3D柱狀圖和折線圖

<%@ 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>

效果圖: