Fushion Chart 结合jason和xml格式数据使用示例

首先需要到官网下载fushion chart的js和swf模板

本人已经下载:可以猛戳此处http://pan.baidu.com/s/1dD68G1N

这里本人以一个3D饼图作为示例

首先是后台需要构建返回到前台fushion chart能够解析的jason格式

这里jason的格式为:

 "chart": { 
            "caption" : "Weekly Sales Summary" ,
            "xAxisName" : "Week",
            "yAxisName" : "Sales",
            "numberPrefix" : "$"
      },
          
      "data" : 
       [
            { "label" : "Week 1", "value" : "14400" },
            { "label" : "Week 2", "value" : "19600" },
            { "label" : "Week 3", "value" : "24000" },
            { "label" : "Week 4", "value" : "15700" }
       ]
  }
如果是后台返回到前台的jason格式,那就需要在后台模拟出这样的对象来,类似于这样

ChartData chartData = new ChartData();
		DataDecription dp = new DataDecription("房间类型入住率统计","数量","房间类型","房间数:");
		chartData.setChart(dp);
		chartData.setData(showDatas);
前台页面调用的js

前台也可以直接调用xml格式的数据

  var chart = new FusionCharts("${ctx}/js/fusioncharts/swf/Pie3D.swf", "ChartId", "500", "300", "0", "0");
    chart.setDataURL("${ctx}/screen/chart.xml");               
    chart.render("chartdiv");

xml数据如下:

<?xml version="1.0" encoding="UTF-8"?>
<chart palette='4' decimals='0' enableSmartLabels='1' enableRotation='0' bgColor='99CCFF,FFFFFF' bgAlpha='40,100' bgRatio='0,100' bgAngle='360' showBorder='0' startingAngle='80' >
            <set label='中国' value='13' isSliced='1'/>
            <set label='印度' value='0.5' />
            <set label='美国' value='2' />
            <set label='日本' value='0.1' isSliced='1'/>
</chart>


显示效果



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值