flex 折线图的双坐标

这篇博客展示了如何在Web页面中通过Flex创建一个带有双坐标的折线图。内容涉及XML布局、JSON数据解析、HTTP服务调用以及Flex组件如LineChart的使用,用于显示电压平均值和容载比的动态变化。博客还涵盖了如何应用动画效果和自定义图表元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在web页面中调用swf

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="400" minHeight="300"
      height="100%" width="100%"
      creationComplete="init()">
 <s:layout>
  <s:BasicLayout/>
 </s:layout>
 <fx:Script>
  <![CDATA[
   import com.adobe.serialization.json.JSONDecoder;
   
   import flash.utils.setInterval;
   import flash.utils.setTimeout;
   
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.rpc.events.ResultEvent;
   
   [Bindable]
   public var baseUrl:String = "";
   [Bindable]
   public var FHFZdata:ArrayCollection=new ArrayCollection();
   //初始化
   public function init():void
   {
    ExternalInterface.addCallback("aa", aa);
    //this.swf_clickHandler(1);
   }
   private var mapnum:String;
   public function aa(name:String):void{
    //Alert.show(name);
    if(name!=mapnum){
     baseUrl = name;
     ser.send();
     mapnum=name;
    }
    
   }
   /*HTTP服务*/
   private function resuleHandler(e:ResultEvent):void{
    var data:String = e.result.toString();
    data = data.replace( /\s/g, '' );
    var arr:Array=new JSONDecoder(data,true).getValue();
    FHFZdata = new ArrayCollection(arr);
   }
   
  ]]>
 </fx:Script>
 <fx:Declarations>
  <!-- 将非可视元素(例如服务、值对象)放在此处 -->
  <s:HTTPService id="ser"  url="{baseUrl}"  resultFormat="text" result="resuleHandler(event)" />
  <!--动画效果-->
  <mx:SeriesInterpolate id="chartChange" duration="2000"/>
  
 </fx:Declarations>
 <!--底层背景-->
 <s:BorderContainer x="0" y="0" backgroundAlpha="1" borderVisible="false" backgroundImage="@Embed('events/dabeijing.png')" width="100%" height="284" textDecoration="none" fontStyle="italic" fontWeight="bold">
  <!--电压三相不平衡曲线图-->
  <s:BorderContainer x="0" y="0" width="100%" backgroundImage="@Embed('events/beijing2.png')" dropShadowVisible="true" borderVisible="false" cornerRadius="6" height="100%">
   <mx:LineChart width="95%" height="75%" id="myChart" seriesFilters="[]"
        dataProvider="{FHFZdata}"
        showDataTips="true" x="7" y="10" paddingLeft="0" paddingRight="0" fontSize="12" fontWeight="normal" fontStyle="normal">
    <!--backgroundElements:背景设置-->
    <mx:backgroundElements>
     <mx:GridLines id="gridLines"
          horizontalTickAligned="true"
          verticalTickAligned="true">
     </mx:GridLines>
    </mx:backgroundElements>
    
    <!--categoryField:横坐标数据节点-->
    <mx:horizontalAxis>
     <mx:CategoryAxis id="h1"
          categoryField="tim"
          />
    </mx:horizontalAxis>
    
    <mx:horizontalAxisRenderers>
     <mx:AxisRenderer placement="bottom" axis="{h1}" />
    </mx:horizontalAxisRenderers>
    
    <!--纵坐标-->
    <mx:verticalAxisRenderers>
     <mx:AxisRenderer placement="left" axis="{v1}" fontSize="12" />
     <mx:AxisRenderer placement="right" axis="{v2}" fontSize="12"/>
    </mx:verticalAxisRenderers>
    
    <!--yField:纵坐标数据节点-->
    <mx:series>
     
     <!--纵坐标轴1-->
     <mx:LineSeries id="cs1" form="curve" horizontalAxis="{h1}" yField="voltageAvg" displayName="电压(V)" showDataEffect="{chartChange}"
           itemRenderer="mx.charts.renderers.CircleItemRenderer">
      <mx:verticalAxis>
       <mx:LinearAxis id="v1" />
      </mx:verticalAxis>
     </mx:LineSeries>
     
     <!--纵坐标轴2-->
     <mx:LineSeries id="cs2" form="curve" horizontalAxis="{h1}" yField="capacityLoadRatio" displayName="容载比" showDataEffect="{chartChange}"
           itemRenderer="mx.charts.renderers.CircleItemRenderer">
      <mx:verticalAxis>
       <mx:LinearAxis id="v2" />
      </mx:verticalAxis>
     </mx:LineSeries>
    </mx:series>
   </mx:LineChart>
   <mx:Legend dataProvider="{myChart}"  direction="horizontal" y="230" width="90%" height="90%" x="180" legendItemClass="MyLegendItem"  fontSize="15" fontStyle="normal" fontWeight="normal"/>
  </s:BorderContainer>
 </s:BorderContainer>
</s:Application>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值