`
天马行空洞
  • 浏览: 5632 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

flex LineChart用法总结

    博客分类:
  • flex
阅读更多
    以下是我最近做flex组件编程时的总结,是主要针对lineChart的,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
     backgroundGradientColors="[0xFFFFFF, 0xd5f3fa]" creationComplete="myInit()">   
     <mx:Script>
         <![CDATA[
         import mx.collections.ArrayCollection;
                  private function myInit() : void {
            lineChart.dataProvider = Data;
            }
           
            public var Data:ArrayCollection = new ArrayCollection
            ([{name:"网络设备",value:67,value1:55},
            {name:"服务器",value:66,value1:76},
            {name:"中间件",value:99,value1:69},
            {name:"数据库",value:87,value1:45}]);
           private function myLabelFormat(obj:Object, pcat:Object, ax:LinearAxis):String
           {
               if(int(obj) > 100)
                   return "";
               return numForm.format(obj) + "%";
           }
          
        ]]>
    </mx:Script>
    <!--跟纵坐标数值后面添加百分号:%-->
    <mx:NumberFormatter id="numForm" useThousandsSeparator="true"/>
    <!--定制坐标轴样式-->
    <mx:Stroke id="s1" weight="3" color="#5eaf60"/>
    <mx:Stroke id="s2" weight="3" color="#1144ef"/>
    <mx:Stroke id="ver1" weight="1" color="yellow" caps="square"/>
    <mx:VBox width="100%" height="100%">
    <!--showDataTips用来确定当鼠标放到线上面是时候提示信息-->
    <mx:LineChart id="lineChart" width="300" height="400" showDataTips="true">
    <mx:backgroundElements>
    <!--定制图表水平网格线,direction有horizontal(水平)、vertical(垂直)-->
    <!--horizontalChangeCount可设置几个刻度显示一条网格线-->
    <!--horizontalTickAligned用来确定坐标轴上的刻度和水平网格线位置的对应关系-->
    <mx:GridLines direction="horizontal" horizontalChangeCount="1" horizontalTickAligned="true">
    <mx:horizontalStroke>
    <!--alpha透明度,weight线条的粗细大小-->
    <mx:Stroke color="red" weight="2" alpha="0.1"/>
    </mx:horizontalStroke>
    </mx:GridLines>
    </mx:backgroundElements>
    <mx:horizontalAxis>
    <!--ticksBetweenLabels用来确定坐标轴上的标签和刻度位置的对应关系;为false时,标签和刻度位置相对应-->
    <mx:CategoryAxis id="h1" categoryField="name" ticksBetweenLabels="false"/>
    </mx:horizontalAxis>
    <mx:verticalAxis>
    <!--baseAtZero用来确定坐标轴的刻度值时候从0开始;minimum="0"防止出现负数-->
    <!--minorInterval:y轴线条的间隔;interval:y轴数值的间隔-->
    <mx:LinearAxis id="v1" baseAtZero="true" minimum="0" interval="20" labelFunction="myLabelFormat"/>
    </mx:verticalAxis>
    <mx:horizontalAxisRenderers>
    <!--tickPlacement横坐标的刻度显示方式,Eg:cross-跨横坐标线显示刻度-->
    <!--color和fontSize是用来设置标签的-->
    <mx:AxisRenderer axis="{h1}" tickPlacement="cross" axisStroke="{ver1}" color="red" fontSize="12"/>
    </mx:horizontalAxisRenderers>
    <mx:verticalAxisRenderers>
    <mx:AxisRenderer axis="{v1}" axisStroke="{ver1}" color="blue" fontSize="14"/>
    </mx:verticalAxisRenderers>
    <mx:series>
    <!--lineStroke设置线条的粗细和颜色;form为线条的样式-->
    <!--displayName用来设置提示该线条的名称-->
    <mx:LineSeries xField="name" yField="value" lineStroke="{s1}" form="segment" displayName="可用率"/>
    <mx:LineSeries xField="name" yField="value1" lineStroke="{s2}" form="segment" displayName="执行率"/>
    </mx:series>
                 <!--过滤线条的阴影-->
    <mx:seriesFilters>
        <mx:Array />
    </mx:seriesFilters>
    </mx:LineChart>
    </mx:VBox>
</mx:Application>
0
1
分享到:
评论

相关推荐

    flex 改变linechart datatips 显示样式代码

    总结来说,改变Flex LineChart Datatips的显示样式主要包括两步:一是定义自定义的CSS样式类,并在Chart组件中引用;二是根据需求编写`dataTipFunction`函数,自定义Datatips的内容。通过这样的方式,我们可以使Line...

    flex LineChart

    以下是我最近做flex组件编程时的总结,是主要针对lineChart的用法,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。

    Flex 饼形图 piechart 柱形图 columnchart 条形图 barchart 折线图 linechart

    Flex是Adobe公司开发的一种用于构建富互联网应用程序(RIA)的开放源代码框架,它主要基于ActionScript编程语言和MXML标记...要理解并应用这些知识点,建议查看博文链接中的内容,通过实践来熟悉Flex图表的使用方法。

    flex Chart

    2. **Chart类型**:除了柱状图,Flex Chart还包括线性图(LineChart)、饼图(PieChart)、面积图(AreaChart)等多种图表类型,每种都有其特定的用途和展示效果。 3. **图表系列(Series)**:每个图表由一个或多个...

    flex 移动折线图

    总的来说,实现Flex中的移动折线图需要理解LineChart组件的特性,熟练掌握DragManager的用法,以及灵活处理数据和视图的同步。通过以上步骤,你可以创建一个交互性强、易于使用的移动线图,满足用户在大数据集上的...

    flex chart explorer

    1. "LineChart结合xml实例-flex图表chart组件教程":这是一个关于如何使用Flex创建线图并与XML数据结合的实例教程。线图是一种常用来展示趋势和变化的图表类型,通过XML数据可以动态地更新图表内容。 2. "ria之家-...

    flex 线图到饼图的联动

    在Flex中,我们可以使用`mx.charts.LineChart`类来创建线图。要实现联动,我们需要将线图的数据源绑定到一个可更新的数据结构,如ArrayCollection,以便当数据发生变化时,线图能够自动更新。 2. **饼图(Pie Chart...

    Eclipse开发Flex新手必学例子(后台数据页面显示N种图表)

    在本文中,我们将深入探讨如何使用Eclipse进行Flex开发,并通过后台数据来展示各种图表,包括LineChart、ColumnChart、AreaChart、BubbleChart和BarChart。对于初学者来说,掌握这些图表的创建方法是理解Flex应用...

    Flex课程学习(附带源码)

    1、flex 是开发swf方法的一种 2、flexBuilder基于eclipse的IDE集成Design、debug动态help 4j:ant脚本 3、flex framework visual components Manager classes RPC/Messaging/Data Service c Utilities 4、MxML ...

    Flex 实时曲线图(定时获取后台数据)

    在Flex中,创建实时更新的曲线图主要依赖于`setInterval`方法来定期执行某个函数,以及`mx:LineChart`组件来展示图表数据。 #### 1. `setInterval` 方法 `setInterval` 是JavaScript中的一个内置函数,它可以定期...

    Flex4中使用组件添加柱状图、饼状图等图表

    在Flex4中,可以通过 `mx:LineChart` 或 `mx:AreaChart` 来绘制线图或面积图。这两种图表的实现方式也十分相似,主要区别在于面积图还会填充线以下的区域。 ### 总结 通过上述介绍可以看出,在Flex4中利用组件添加...

    flex图形组件

    2. Flex图形组件类型:Flex提供多种图形组件,如BarChart(条形图)、PieChart(饼图)、LineChart(折线图)、AreaChart(面积图)等,适用于不同类型的数据显示需求。 3. 数据绑定:Flex图形组件支持数据绑定,...

    Flex_4系统组件:图表

    通过阅读这份PPT,我们可以更深入地了解Flex 4图表组件的使用方法和最佳实践。 总结来说,Flex 4的图表组件是强大的数据可视化工具,它们提供了丰富的类型和定制选项,便于开发者创建出符合需求的交互式图表。通过...

    Flex实现动态仪表盘

    使用LineChart或AreaChart可以展示趋势数据。 4. **动态更新**:在ActionScript中,你可以编写事件监听器来响应数据变化,从而实时更新仪表盘。例如,当新的数据点到达时,可以调用图表的`addSeries()`方法添加新的...

    flex图表导出图片

    Flex提供了一系列强大的图表组件,如BarChart、LineChart、PieChart等,这些组件基于Adobe Flex SDK,可以方便地创建各种动态、交互式的图表。通过使用ActionScript和MXML,开发者可以定制图表样式,设置数据源,...

    flex 经典教程下载

    Flex 还支持各种图表组件,如PieChart、LineChart和ColumnChart,可用于数据可视化。 **总结** 熟练掌握Flex开发,你需要了解和应用以下技能: 1. 熟练使用Design和Source视图。 2. 掌握MXML和ActionScript的语法,...

    Flex4.6 API

    8. **图表组件**:Flex 4.6提供了丰富的图表组件,如LineChart、ColumnChart、PieChart等,便于数据可视化。 9. **移动开发支持**:Flex 4.6增加了对移动设备的支持,可以通过Flex SDK创建iOS、Android等平台的应用...

    flex生成图片并保存

    1. **SaveChart.mxml** - 这个文件很可能包含了一个使用Flex的图表组件(如mx:PieChart或mx:LineChart)生成图表的示例,并将其保存为图片。在Flex中,我们可以利用Chart的`copyToBitmap`方法将图表转换为BitmapData...

    使用 Flex3 开发 OLAP 应用

    &lt;mx:LineChart id="lineChart" showDataTips="true" width="100%" height="100%"/&gt; ... ``` 在这个例子中,`Chart.as` 文件包含了图表展示的逻辑。为了更好地理解这部分代码的工作原理,我们需要讨论两个关键...

    多款风格的Flex的Demo、柱状图、饼图、折线图等

    折线图(Line Chart)适用于展示数据随时间变化的趋势,通过连接一系列数据点形成折线,可以清晰地看出数值的增减趋势。在Flex中,折线图可以设置点的样式、线条颜色、轴标签,以及添加平滑曲线等功能,以提升视觉...

Global site tag (gtag.js) - Google Analytics