fusioncharts如何運用

<span style="font-size:18px;">fusioncharts是一個很使用的網頁報表插件，通過它可以滿足各種各樣的表格需要而且樣式也肯酷。</span>

這裏是fusioncharts的下載地址http://www.fusioncharts.com/download/。

接下來就看看它是如何完成一個圖表的：

我用的是myeclipse所以就用的web項目做的，首先創建web項目。

然後創建fusioncharts文件夾把壓縮包下js文件夾裏所有的文件考過來。

在index.jsp中導入js，第一個是必要的js，第二個是主題js。

<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript"
	src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">

定義一個DIV。

<div id="chartContainer">FusionCharts XT will load here!</div>

接下來是關鍵，自定義圖表。

<script type="text/javascript">
	FusionCharts.ready(function() {
		var revenueChart = new FusionCharts({
			"type" : "column3d",
			"renderAt" : "chartContainer",
			"width" : "500",
			"height" : "300",
			"dataFormat" : "json",
			"dataSource" : {
				"chart" : {
					"caption" : "Monthly revenue for last year",
					"subCaption" : "Harry's SuperMart",
					"xAxisName" : "Month",
					"yAxisName" : "Revenues (In USD)",
					"theme" : "fint"
				},
				"data" : [ {
					"label" : "Jan",
					"value" : "420000"
				}, {
					"label" : "Feb",
					"value" : "810000"
				}, {
					"label" : "Mar",
					"value" : "720000"
				}, {
					"label" : "Apr",
					"value" : "550000"
				}, {
					"label" : "May",
					"value" : "910000"
				}, {
					"label" : "Jun",
					"value" : "510000"
				}, {
					"label" : "Jul",
					"value" : "680000"
				}, {
					"label" : "Aug",
					"value" : "620000"
				}, {
					"label" : "Sep",
					"value" : "610000"
				}, {
					"label" : "Oct",
					"value" : "490000"
				}, {
					"label" : "Nov",
					"value" : "900000"
				}, {
					"label" : "Dec",
					"value" : "730000"
				} ]
			}

		});
		revenueChart.render();
	});
</script>

type是圖表的類型。

renderAt是在那個控件上顯示圖表，值是控件的id。

width寬度。

height高度。

dataFormat數據格式json/xml。

dataSource數據源。

chart表格的參數：caption標題、subCaption副標題、xAxisName橫軸名稱、yAxisName縱軸名稱、theme主題。

data具體數據。

這樣一個簡單的3D柱狀圖表就完成了。