改变指标改变图（FusionChart）

niulanshan

浏览: 564194 次

最近访客更多访客>>

扶起之秀

qijojo

qy86615069

yungaoyue2005

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1540)

社区版块

存档分类

1、通过改变指标，改变柱形图显示结果

ChangeColumn.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改变参数的柱形图</title>
<script type="text/javascript" src="../Scripts/JS/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../Scripts/JS/FusionCharts.js"></script>
<style type="text/css">
   .body_table{
       width: 100%;
       height: 100%;
       font-size: 18px;
       color: #FF8800;
       background-color:#CCCCCC;
       font-family: serif sans-serif cursive fantasy;
   }
   #tab{
       width: 100%;
       height: 100%;
   }
   .tr_td input{
       color: #FF8800;
   }
</style>
<script type="text/javascript">
   $(function(){
	   var column = new FusionCharts( "../Scripts/FusionChart/Column2D.swf", "columnId", "1280", "510", "0", "1" );
	   column.setXMLUrl("column2D.xml");
	   column.render("columnContainer");
   });
   
   function changeColumn(xmlUrl){
	   var column = new FusionCharts( "../Scripts/FusionChart/Column2D.swf", "columnId", "1280", "510", "0", "1" );
	   column.setXMLUrl(xmlUrl);
	   column.render("columnContainer");
   }
</script>
</head>
<body class="body_table">
  <table id="tab">
     <tr>
       <td class="tr_td">
         <input type="radio" id="" name="state" onclick="changeColumn('column2D1.xml')"/>学号
         <input type="radio" id="" name="state" onclick="changeColumn('column2D2.xml')"/>姓名
         <input type="radio" id="" name="state" onclick="changeColumn('column2D3.xml')"/>性别
       </td>
     </tr>
     <tr>
       <td>
         <div id="columnContainer"></div>
       </td>
     </tr>
  </table>
   
</body>
</html>

2、显示默认柱形图，column2D.xml提供数据源

（1）源码column2D.xml：

<?xml version="1.0" encoding="UTF-8"?>
<chart yAxisName="人数" caption="人数分布统计图" useRoundEdges="1" xAxisName="分数范围" baseFontSize='14' 
      bgColor="FFFFFF,FFFFFF" showBorder="0" showLegend="1">
      
        <set label="0-10" value="5"  /> 
        <set label="10-20" value="12" /> 
        <set label="20-30" value="36" /> 
        <set label="30-40" value="12" /> 
        <set label="40-50" value="34" />
        <set label="50-60" value="85"  /> 
        <set label="60-70" value="184" /> 
        <set label="70-80" value="196" /> 
        <set label="80-90" value="124" /> 
        <set label="90-400" value="68" />

</chart>

（2）显示结果如下图：

3、选择“学号”，column2D1.xml提供数据源

（1）源码column2D1.xml

<?xml version="1.0" encoding="UTF-8"?>
<chart yAxisName="分数" caption="分数分布统计图" useRoundEdges="1" xAxisName="学号" baseFontSize='14' 
      bgColor="FFFFFF,FFFFFF" showBorder="0" showLegend="1">
      
        <set label="2013010101" value="85"  /> 
        <set label="2013010102" value="80" /> 
        <set label="2013010103" value="90" /> 
        <set label="2013010104" value="95" /> 
        <set label="2013010105" value="75" />
        <set label="2013010106" value="65"  /> 
        <set label="2013010107" value="84" /> 
        <set label="2013010108" value="96" /> 
        <set label="2013010109" value="88" /> 
        <set label="2013010110" value="78" />

</chart>

（2）显示结果如下图：

4、选择“姓名”，column2D2.xml提供数据源

（1）源码column2D2.xml

<?xml version="1.0" encoding="UTF-8"?>
<chart yAxisName="分数" caption="分数分布统计图" useRoundEdges="1" xAxisName="姓名" baseFontSize='14' 
      bgColor="FFFFFF,FFFFFF" showBorder="0" showLegend="1">
      
        <set label="王二" value="85"  /> 
        <set label="李四" value="72" /> 
        <set label="赵倩" value="96" /> 
        <set label="西门红" value="62" /> 
        <set label="上官里" value="68" />
        <set label="诸葛流云" value="79"/> 
        <set label="魏巍" value="84" /> 
        <set label="钱三" value="95" /> 
        <set label="孙文" value="90" /> 
        <set label="郑武" value="70" />

</chart>

（2）显示结果如下图：

5、选择“性别”，column2D3.xml提供数据源

（1）源码column2D3.xml：

<?xml version="1.0" encoding="UTF-8"?>
<chart yAxisName="人数" caption="人数分布统计图" useRoundEdges="1" xAxisName="性别" baseFontSize='14' 
      bgColor="FFFFFF,FFFFFF" showBorder="0" showLegend="1">
      
        <set label="男" value="285"  /> 
        <set label="女" value="172" /> 

</chart>

（2）显示结果如下图：