flex 如何制作监控cpu的效果

[pilishou]

如题flex+j2ee
需要做个cpu的监控效果。跟任务管理器里面的效果一样。
刚接触flex，不知道flex如何实现。
请高手赐教

[pilishou]

自己顶下，求高手...

[chqj_163]

如果是网络计算机的话，用jsp获取并监控系统的信息，然后传给flex显示就行了

[yc2503yc]

http://www.fusioncharts.com/widgets/Demos/TM/Index.html
http://www.fusioncharts.com/widgets/livedemos.asp#tm
fusionwidgets 可以做出那种效果来！有兴趣的话可以再后面跟帖，共同学习下，呵呵

[yc2503yc]

fusionwidgets 他是有Flex版的，所以不用担心

[水中影子]

[Quote=引用 3 楼 yc2503yc 的回复:]

http://www.fusioncharts.com/widgets/Demos/TM/Index.html
http://www.fusioncharts.com/widgets/livedemos.asp#tm
fusionwidgets 可以做出那种效果来！有兴趣的话可以再后面跟帖，共同学习下，呵呵
[/Quote]

学习

[pilishou]

http://www.fusioncharts.com/widgets/livedemos.asp#tm
源码并没有提供完全的，没办法学习到啊。
而且不是flex版本的

[清风水岸]

强大啊！！！

[yc2503yc]

无聊写着好玩的,或者换成AreaChart调调样式试试

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                verticalAlign="middle"
                backgroundColor="white"
                creationComplete="init()"
                backgroundGradientAlphas="[1.0, 0.0]"  
                width="700"
                height="410"
                borderColor="#EFF0F1"
                borderStyle="outset"
                themeColor="#D4E7FB"
                backgroundGradientColors="[#DDDCDC, #E6E6E6]">

    <mx:Script>
        <![CDATA[
        	import flash.utils.setInterval;
        	import mx.collections.ArrayCollection;
        	import mx.charts.series.items.ColumnSeriesItem;
        	import mx.charts.series.items.LineSeriesItem;
        	import mx.charts.HitData;
        	import mx.controls.Alert;
        	import mx.formatters.SwitchSymbolFormatter;
            import mx.charts.CategoryAxis;
            import mx.charts.chartClasses.IAxis;

            
			private function init():void{
		 	setInterval(function():void{
		 		createData();
		 	},3000);

			}
			 
            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String
            {
                return item + '%';
            }
 
			[Bindable]
			private var chartdata:ArrayCollection=new ArrayCollection([
				{datetime:'01.00',data1:72},
				{datetime:'01.03',data1:78},
				{datetime:'01.06',data1:21},
				{datetime:'01.09',data1:35},
				{datetime:'01.12',data1:62},
				{datetime:'01.15',data1:30},
				{datetime:'01.12',data1:81},
				{datetime:'01.18',data1:7},
				{datetime:'01.21',data1:11},
				{datetime:'01.24',data1:97}
			]);
			
			
			private function createData():void{
				 var obj:Object = new Object();
				 obj.datetime = format.format(new Date());
				 obj.data1 = getRandomValue();
				 chartdata.addItem(obj);
			}
			//模拟数据
			 public function getRandomValue():int{	  
	  			return Math.round(Math.random()*100); 
	  		}
           
        ]]>
    </mx:Script>
    <mx:Style>
    	ColumnChart {
horizontalAxisStyleName:myAxisStyles;
verticalAxisStyleName:myAxisStyles;
}
.myAxisStyles {
tickPlacement:none;

}
ToolTip{
fontSize:12;
}
.ChineseFont{
        fontFamily:"Verdana","宋体";
        fontSize:12;
        backgroundColor:#33CC99;
     }
DataTip{
    fontSize:13;
    }

</mx:Style>
    <!-- 曲线特效 -->
    <mx:WipeRight id="wipeOut" duration="1000"/>
    <mx:WipeRight id="wipeIn" duration="1000"/>
     
    <!-- Define Strokes -->
    <mx:Stroke id="s1" color="0x006af8" weight="0.3"/>
    <mx:Stroke id="s3" color="0x4bef04" weight="0.3"/>
    <mx:Stroke id="vSolid" weight="1" color="#D7D7D7" alpha="0.1"/>
    <mx:Stroke id="hSolid" weight="1" color="#D7D7D7" alpha="0.3"/>
    <mx:SolidColor id="vFill" color="#D7D7D7" alpha=".2"/>
    <mx:SolidColor id="hFill" color="#FFFFFF" alpha=".1"/>
    <mx:SolidColor id="tFill" color="#ffffff" alpha=".1"/>
    
    <mx:VBox height="100%" width="100%" horizontalAlign="center">	
   
    <mx:LineChart id="myChart" fontSize="13" dataProvider="{chartdata}" showDataTips="true" width="96%" height="82%" styleName="myAxisStyles">
        <mx:backgroundElements>
            <mx:GridLines direction="both" horizontalTickAligned="true" verticalTickAligned="false" verticalStroke="{vSolid}" horizontalStroke="{hSolid}" verticalFill="{vFill}"
               horizontalFill="{hFill}" verticalAlternateFill="{tFill}" horizontalAlternateFill="{tFill}"/>
        </mx:backgroundElements>
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false" maximum="100" minimum="0" labelFunction="linearAxis_labelFunc"/>              
        </mx:verticalAxis>
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca" categoryField="datetime" ticksBetweenLabels="true"/>
        </mx:horizontalAxis>
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}" canDropLabels="true" showLabels="true" showLine="true" horizontalCenter="0"/>
        </mx:horizontalAxisRenderers>
         
        <mx:series>  
            <mx:LineSeries id="dhlline" xField="datetime" yField="data1" displayName="Cpu利用率" interactive="true" lineStroke="{s3}" creationCompleteEffect="{wipeIn}" showEffect="{wipeIn}" hideEffect="{wipeOut}" form="segement"/>
        </mx:series>
    </mx:LineChart>
    
    </mx:VBox>
    <mx:DateFormatter formatString="NN:SS" id="format" />
</mx:Application>

[yc2503yc]

[Jason-Jin]

这个只是flex Chart控件的使用啊，flex又办法直接访问底层？

[yc2503yc]

我不知道楼上所说的什么意思？楼主应该是要制作模仿监控CPU那种效果，而不是要用flex去访问底层监控CPU利用率的吧！

[pilishou]

效果应该是跟楼上上次发出来的地址一样的
http://www.fusioncharts.com/widgets/Demos/TM/Index.html
flex chart控件做这个是有问题的，如果一个监控节目一直开着，不停的用timer来做请求，会出问题的。
最好能做成上面地址里那个效果，可惜的是上面只有.fla的代码，大部分的ActionScript都没有提供

[fw176170847]

善用graph
柱形图，波状图都可以自己做出来

[Shiva]

···可以的哈，Flex可以直接和java交互