Fusionchar使用

Fusionchart有free版和收费版，free版只支持xml格式的数据，收费版支持JSON和xml格式的数据。

本项目环境为Struts2+html，

首先构建一个Struts2项目，以JSON方式返回数据，具体实现请参考其他资料。

要使用到Fusionchart js设置需要将Fusionchart下的FusionCharts.js加入到项目中，并在html加入引用。

 

Fusionchart free版

1.利用JQuery获取Struts2返回的JSON数据

var host = getHost();   //服务器的IP地址和端口
var url = "http://" +  host + "/FunelChart/test/getData.action";
$.get(url, null, function(data){
//console.log(data);
FCF_Funnel(data);
}, "json" );

2.读取JSON数据，整合成XML

function FCF_Funnel(data) {
//图的总体属性
var xml = "<chart showNames='1' showValues='0' isSliced='1' slicingDistance='10'  numberScaleValue='1000,1000' numberScaleUnit='K,M'  funnelBaseHeight='20'>";
//每个set的名称
var name = "<set name='";
//每个set的值,fusionchart Funel图按照value所占总value的比例画图
var value = "' value='";
//每个set的颜色
var color = "' color='";
//每个set的其他设置
var other = "' borderThicknes='2'/>";
xml += name + "a" + value + data.a + color + "006F00" + other;
xml += name + "b" + value + data.b + color + "FF0000" + other;
xml += name + "c" + value + data.c + color + "0099CC" + other;
xml += name + "d" + value + data.d + color + "FF5904" + other;
xml += "</chart>";
console.log(xml);
var myChart = new FusionCharts("./FusionCharts/FCF_Funnel.swf","myChartId","500","500");
myChart.setDataXML(xml);
myChart.render("div1");
}

3.将数据设置给FunelChart

var myChart = new    FusionCharts("./FusionCharts/FCF_Funnel.swf","myChartId","500","500"); 
//设置数据
myChart.setDataXML(xml); 
myChart.render("div1");

4.具体效果

 

 

Fusionchart 收费版 JSON方式

下载Fusionchart试用版，将Charts目录下的FusionCharts.js加入到项目中，在SourceCode下的FusionCharts.js貌似是free版的，不能使用JSON格式的数据。虽然将FusionChart.js在Eclipse会报错，但是仍然能运行，估计是试用版的原因

1.读取JSON数据，整合成chart需要的JSON数据

function Funnel(data) {
//构建所需JSON数据
var json = new Object();
    //图的总体属性
json.chart = {
"lowerlimit": "0",
   "upperlimit": "100",
   "lowerlimitdisplay": "Bad",
   "upperlimitdisplay": "Good",
   "numbersuffix": "%",
   "showvalue": "1"
};
//用一个js数组构建一个JSON数组
var chartData = new Array(4);
//构建每个小图的数据，相当于xml里的set
chartData.push({"label":"a","value":data.a});
chartData.push({"label":"b","value":data.b});
chartData.push({"label":"c","value":data.c});
chartData.push({"label":"d","value":data.d});
json.data = chartData;
console.log(json);
//将数据设置给FunelChart
var myChart = new FusionCharts("./FusionCharts/Funnel.swf","myChartId","500","500");
myChart.setJSONData(json);
myChart.render("div1");
}

2.具体效果

红色处是试用版都会有的（卖广告）,最后一个数据(d,40%)都会位于最顶层。

 

补充：

Fusion chart可以使用chart 和graph设置整个图的属性，具体参考官网提供的资料，每个小图可以设置自己的属性，如link（用户点击图后发生的时，可以调用一个js函数）。设置数据还有setXMLUrl()和setJSONUrl(),参数为xxx.xml xxx.json,收费版的funel可以在图上调为2D图，free不支持。

 

 

项目下载：http://pan.baidu.com/share/link?shareid=466030684&uk=1144409864