• 改变指标改变图(FusionChart)


    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{
            100%;
           height: 100%;
           font-size: 18px;
           color: #FF8800;
           background-color:#CCCCCC;
           font-family: serif sans-serif cursive fantasy;
       }
       #tab{
            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" οnclick="changeColumn('column2D1.xml')"/>学号
             <input type="radio" id="" name="state" οnclick="changeColumn('column2D2.xml')"/>姓名
             <input type="radio" id="" name="state" οnclick="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)显示结果如下图:




  • 相关阅读:
    AOS编排语言系列教程(五):创建安全组SecurityGroup
    AOS编排语言系列教程(四):创建弹性云服务器ECS
    GO语言实现 自动登陆华为云并获取cookies 详解(兼介绍SSO单点登陆)
    人脸匹配搜索指北
    人脸识别使用base64的方式添加人脸
    AOS编排语言系列教程(三):创建子网Subnet
    AOS编排语言系列教程(二):初识AOS编排语言,创建你的第一个AOS模板
    华为云社区·CSDN【寻找黑马程序员】有奖征文活动,邀你挥洒才情
    AOS编排语言系列教程(一):开启AOS之旅,解锁各种自动化姿势
    00063_String类
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315739.html
Copyright © 2020-2023  润新知