fusioncharts 用法实例
支持xml格式和json格式的数据。
用法很简单。
1.需要引入FusionCharts.js.
2.html中定义个id="chart"的div
<div id="chart"></div>
3.js代码调用即可
（一）xml格式。
var dataXml = "<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='一月' value='462' color='AFD8F8' /><set name='二月' value='857' color='F6BD0F' /><set name='三月' value='671' color='8BBA00' /><set name='四月' value='494' color='FF8E46' /><set name='五月' value='761' color='008E8E' /><set name='六月' value='960' color='D64646' /><set name='七月' value='629' color='8E468E' /><set name='八月' value='622' color='588526' /><set name='九月' value='376' color='B3AA00' /><set name='十月' value='494' color='008ED6' /><set name='十一月' value='761' color='9D080D' /><set name='十二月' value='960' color='A186BE' /></graph>";
var myChart = new FusionCharts("${base}/thirdparty/FusionCharts/ChartsV3/Charts/Pie3D.swf", "myChartId_00", "500", "400");//参数分别为【需要使用的swf样式】，【chart的id（同一个页面有多个chart避免重复）】，【width】，【height】
//myChart.setJSONData(${jsondata!});
myChart.setDataURL(dataXml);
myChart.render("chart");
（二）json
- //使用json数据
- var MSLine = new FusionCharts("flex/fusioncharts/MSLine.swf", "MSLineID", "460", "350", "0", "1"); MSLine.setJSONData({
- "chart":{
- "caption":"Business Results 2005 v 2006",
- "xaxisname":"Month",
- "yaxisname":"Revenue",
- "showvalues":"0",
- "numberprefix":"$" },
- "categories":[{
- "category":[
- { "label":"Jan" },
- { "label":"Feb" },
- { "label":"Mar" },
- { "label":"Apr" },
- { "label":"May" },
- { "label":"Jun" },
- { "label":"Jul" },
- { "label":"Aug" },
- { "label":"Sep" },
- { "label":"Oct" },
- { "label":"Nov" },
- { "label":"Dec" }]
- }
- ],
- "dataset":[
- {
- "seriesname":"2006",
- "data":[
- { "value":"27400" },
- { "value":"29800" },
- { "value":"25800" },
- { "value":"26800" },
- { "value":"29600" },
- { "value":"32600" },
- { "value":"31800" },
- { "value":"36700" },
- { "value":"29700" },
- { "value":"31900" },
- { "value":"34800" },
- { "value":"24800" } ] },
- { "seriesname":"2007",
- "data":[
- { "value":"27900" },
- { "value":"29800" },
- { "value":"15800" },
- { "value":"24800" },
- { "value":"19600" },
- { "value":"32600" },
- { "value":"35800" },
- { "value":"31700" },
- { "value":"39700" },
- { "value":"51900" },
- { "value":"14800" },
- { "value":"20800" } ] },
- { "seriesname":"2005",
- "data":[{ "value":"10000" },
- { "value":"11500" },
- { "value":"12500" },
- { "value":"15000" },
- { "value":"11000" },
- { "value":"9800" },
- { "value":"11800" },
- { "value":"19700" },
- { "value":"21700" },
- { "value":"21900" },
- { "value":"22900" },
- { "value":"20800" } ] } ],
- "trendlines":{
- "line":[{ "startvalue":"26000",
- "color":"91C728",
- "displayvalue":"Target",
- "showontop":"1"
- }]
- },
- "styles":[{
- "definition":[{
- "style":[{ "name":"CanvasAnim",
- "type":"animation",
- "param":"_xScale",
- "start":"0",
- "duration":"1"
- }]
- }],
- "application":[{
- "apply":[{ "toobject":"Canvas",
- "styles":"CanvasAnim"
- }]
- }]
- }]
- });
//如果java代码生成，可以理解为整个是map，chart是纯map格式的，data是map中包含了list<Map>。
Map<String,Object> chart = new HashMap<String, Object>();//图表属性
chart.put("caption", "图表标题");//图表标题
chart.put("bgcolor", "F2F8EF");//bgcolor
chart.put("showborder", "0");//border
chart.put("exportenabled", "1");//export
chart.put("exportshowmenuitem", "1");//export
chart.put("logoalpha", "30");//alpha
chart.put("useroundedges", "1");
chart.put("yaxisname", "Sales Figure");
chart.put("logoposition", "CC");
List<Map<String,Object>> datalist = new ArrayList<Map<String ,Object>>();//组织数据List<Map>
for(Map<String,Object> m :queryListC){
Map<String,Object> map = new HashMap<String, Object>();
map.put("label", "xxx");
map.put("value", value);
datalist.add(map);
}
Map<String ,Object> jsondataMap = new HashMap<String, Object>();//最终json仍然是map，需要把前面的数据放入
jsondataMap.put("data", datalist);
jsondataMap.put("chart", chart);
最终将数据返回js
model.put("jsondata", net.sf.json.JSONObject.fromObject(jsondataMap).toString().replace("\"", "'"));
以上是fusionCharts的基本用法。fusionCharts功能很强大，能实现精美的图标功能，可以上官网查看demo。