加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-16 05:04:32 所属栏目:百科 来源:网络整理
导读:首先需要到官网下载fushion chart的js和swf模板 本人已经下载:可以猛戳此处http://pan.baidu.com/s/1dD68G1N 这里本人以一个3D饼图作为示例 首先是后台需要构建返回到前台fushion chart能够解析的jason格式 这里jason的格式为: "chart": { "caption" : "We

首先需要到官网下载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>


显示效果

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读