参考： http://cmsblogs.com/?p=843#comments
很不错的教程
附上自己写的一个小demo
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
<div id="chartContainer">FusionCharts XT will load here!</div>
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function createColumnCharte(data, imgContentId) {
var d = constructChrat(data);
console.info(d);
var myChart = new FusionCharts( "FusionCharts/Column3D.swf",
"img", "850", "600", "0", "1" );
myChart.setJSONData(d);
myChart.render(imgContentId);
}
function constructChrat(data) {
var charte = {"caption":"图表", "xAxisName" :"选项",
"yAxisName":"数量", "numberPrefix":"",
"formatNumberScale":"0",
"decimalPrecision":"0"
};
//修改label字体
var styles = { "definition": [
{
"name": "myLabelsFont",
"type": "font",
"font": "微软雅黑",
"size": "14",
"color": "000000",
"bold": "1"
}
],
"application": [
{
"toobject": "DataLabels",
"styles": "myLabelsFont"
}
]
};
var dataList = constructChartDataList(data);
var json = {"chart": charte, "data": dataList, "styles":styles};
return json;
}
function constructChartDataList(data) {
data = eval("(" + data +")");
var listQueOption = data.listQueOption;
var listValue = data.listValue;
//展示选项数据
var html = "";
var optionText = "";
var datalist = [];
for(var temp in listQueOption) {
var option = listQueOption[temp];
var value = listValue[temp];
var singData = new construSingleData(option, value);
//var label = {"label":option+"", "value": value};
datalist.push(singData);
}
return datalist;
}
function construSingleData(option, value) {
this.label = option;
this.value = value;
}
var data = "{\"amount\":8420,\"listValue\":[0,4995,2628,797,0],\"imgPath\":\"imgpath\",\"listQueOption\":[\"不到18岁\",\"18-34岁\",\"35-49岁\",\"50-64岁\",\"65岁及以上\"],\"listPercent\":[\"0.00%\",\"59.32%\",\"31.21%\",\"9.47%\",\"0.00%\"]}";
createColumnCharte(data, "chartContainer");
</script>
</body>
</html>
时间： 2024-11-05 18:30:11