以下是我最近做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>
分享到:
相关推荐
总结来说,改变Flex LineChart Datatips的显示样式主要包括两步:一是定义自定义的CSS样式类,并在Chart组件中引用;二是根据需求编写`dataTipFunction`函数,自定义Datatips的内容。通过这样的方式,我们可以使Line...
以下是我最近做flex组件编程时的总结,是主要针对lineChart的用法,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。
Flex是Adobe公司开发的一种用于构建富互联网应用程序(RIA)的开放源代码框架,它主要基于ActionScript编程语言和MXML标记...要理解并应用这些知识点,建议查看博文链接中的内容,通过实践来熟悉Flex图表的使用方法。
2. **Chart类型**:除了柱状图,Flex Chart还包括线性图(LineChart)、饼图(PieChart)、面积图(AreaChart)等多种图表类型,每种都有其特定的用途和展示效果。 3. **图表系列(Series)**:每个图表由一个或多个...
总的来说,实现Flex中的移动折线图需要理解LineChart组件的特性,熟练掌握DragManager的用法,以及灵活处理数据和视图的同步。通过以上步骤,你可以创建一个交互性强、易于使用的移动线图,满足用户在大数据集上的...
1. "LineChart结合xml实例-flex图表chart组件教程":这是一个关于如何使用Flex创建线图并与XML数据结合的实例教程。线图是一种常用来展示趋势和变化的图表类型,通过XML数据可以动态地更新图表内容。 2. "ria之家-...
在Flex中,我们可以使用`mx.charts.LineChart`类来创建线图。要实现联动,我们需要将线图的数据源绑定到一个可更新的数据结构,如ArrayCollection,以便当数据发生变化时,线图能够自动更新。 2. **饼图(Pie Chart...
在本文中,我们将深入探讨如何使用Eclipse进行Flex开发,并通过后台数据来展示各种图表,包括LineChart、ColumnChart、AreaChart、BubbleChart和BarChart。对于初学者来说,掌握这些图表的创建方法是理解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中,创建实时更新的曲线图主要依赖于`setInterval`方法来定期执行某个函数,以及`mx:LineChart`组件来展示图表数据。 #### 1. `setInterval` 方法 `setInterval` 是JavaScript中的一个内置函数,它可以定期...
在Flex4中,可以通过 `mx:LineChart` 或 `mx:AreaChart` 来绘制线图或面积图。这两种图表的实现方式也十分相似,主要区别在于面积图还会填充线以下的区域。 ### 总结 通过上述介绍可以看出,在Flex4中利用组件添加...
2. Flex图形组件类型:Flex提供多种图形组件,如BarChart(条形图)、PieChart(饼图)、LineChart(折线图)、AreaChart(面积图)等,适用于不同类型的数据显示需求。 3. 数据绑定:Flex图形组件支持数据绑定,...
通过阅读这份PPT,我们可以更深入地了解Flex 4图表组件的使用方法和最佳实践。 总结来说,Flex 4的图表组件是强大的数据可视化工具,它们提供了丰富的类型和定制选项,便于开发者创建出符合需求的交互式图表。通过...
使用LineChart或AreaChart可以展示趋势数据。 4. **动态更新**:在ActionScript中,你可以编写事件监听器来响应数据变化,从而实时更新仪表盘。例如,当新的数据点到达时,可以调用图表的`addSeries()`方法添加新的...
Flex提供了一系列强大的图表组件,如BarChart、LineChart、PieChart等,这些组件基于Adobe Flex SDK,可以方便地创建各种动态、交互式的图表。通过使用ActionScript和MXML,开发者可以定制图表样式,设置数据源,...
Flex 还支持各种图表组件,如PieChart、LineChart和ColumnChart,可用于数据可视化。 **总结** 熟练掌握Flex开发,你需要了解和应用以下技能: 1. 熟练使用Design和Source视图。 2. 掌握MXML和ActionScript的语法,...
8. **图表组件**:Flex 4.6提供了丰富的图表组件,如LineChart、ColumnChart、PieChart等,便于数据可视化。 9. **移动开发支持**:Flex 4.6增加了对移动设备的支持,可以通过Flex SDK创建iOS、Android等平台的应用...
1. **SaveChart.mxml** - 这个文件很可能包含了一个使用Flex的图表组件(如mx:PieChart或mx:LineChart)生成图表的示例,并将其保存为图片。在Flex中,我们可以利用Chart的`copyToBitmap`方法将图表转换为BitmapData...
<mx:LineChart id="lineChart" showDataTips="true" width="100%" height="100%"/> ... ``` 在这个例子中,`Chart.as` 文件包含了图表展示的逻辑。为了更好地理解这部分代码的工作原理,我们需要讨论两个关键...
折线图(Line Chart)适用于展示数据随时间变化的趋势,通过连接一系列数据点形成折线,可以清晰地看出数值的增减趋势。在Flex中,折线图可以设置点的样式、线条颜色、轴标签,以及添加平滑曲线等功能,以提升视觉...