`
leitianfu
  • 浏览: 147973 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

flex Chart相关属性

FlexCSS编程WebService 
阅读更多
Flex 图表控件可以创建一些最常用的图表类型，并且自定义其表现形式。图表控件在 mx.charts.* 包中。

下表列出了提供 Flex 提供的图表类型、控件类名以及用来定义每个图表的数据表示的序列类名。

图表类型         图表控件类  图表序列类 
Area              AreaChart AreaSeries
Bar               BarChart BarSeries
Bubble            BubbleChart BubbleSeries
Candlestick       CandlestickChart CandlestickSeries
Column            ColunmChart ColumnSeries
HighLowOpenClose  HLOCChart HLOCseries
Line              LineChart LineSeries
Pie               PieCahrt PieSeries
Plot              PlotChart PlotSeries



所有的图表控件，除了 PieChart 类之外，都是 CartesianChart 类的子类。 笛卡尔图表（ Cartesian Chart ）专门用来在矩形和二维空间表示数据点集。 PieChart 类是 PolarChart 类的子类，它表示圆形区域的数据。

所有的图表控件都继承自 ChartBase 类的基本图形特征


1.       chart：总体控制
2.       series：定义什么样的数据来展示，x,y轴分别显示什么数据。它是包含相应的seriesItem的Array。SeriesItem封装了极值点，填充方式，xy数据等。

3.       series 中displayName属性控制tooltip

4.       barest->barseries, columnset->columnset

5.       categoryAxis将某列数据映射到轴上

linerAxis自定义轴数据，最大值和最小值

logAxis用对数形式

datetimeAxis

6.       通过axixrender更改轴的外观specified by the horizontalAxisRenderers or verticalAxisRenderers

7.       chartdata的数据源：

scriptblock，xml，remoteobject，webservice，Httpservice，MXML

数据源类型：

（1）static Array

private var expenses:Array = [

        {Month:"January",Profit:2000,Expenses:1500,Amount:450},

        {Month:"February",Profit:1000,Expenses:200,Amount:600},

        {Month:"March",Profit:1500,Expenses:500,Amount:300},

        {Month:"April",Profit:500,Expenses:300,Amount:500},

        {Month:"May",Profit:1000,Expenses:450,Amount:250},

        {Month:"June",Profit:2000,Expenses:500,Amount:700}

     ];

（1）       MXML：

<mx:Array id="expenses">

     <mx:Object

        Month="January"

        Profit="2000"

        Expenses="1500"

        Amount="450"

     />

     <mx:Object

        Month="February"

        Profit="1000"

        Expenses="200"

        Amount="600"

     />

     <mx:Object

        Month="March"

        Profit="1500"

        Expenses="500"

        Amount="300"

     />

     <mx:Object

        Month="April"

        Profit="500"

        Expenses="300"

        Amount="500"

     />

     <mx:Object

        Month="May"

        Profit="1000"

        Expenses="450"

        Amount="250"

     />

     <mx:Object

        Month="June"

        Profit="2000"

        Expenses="500"

        Amount="700"

     />

  </mx:Array>

或者

<mx:Array id="expenses">

     <mx:Object>

       <mx:Month>January</mx:Month>

       <mx:Profit>2000</mx:Profit>

       <mx:Expenses>1500</mx:Expenses>

       <mx:Amount>450</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>February</mx:Month>

       <mx:Profit>1000</mx:Profit>

       <mx:Expenses>200</mx:Expenses>

       <mx:Amount>600</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>March</mx:Month>

       <mx:Profit>1500</mx:Profit>

       <mx:Expenses>500</mx:Expenses>

       <mx:Amount>300</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>April</mx:Month>

       <mx:Profit>500</mx:Profit>

       <mx:Expenses>300</mx:Expenses>

       <mx:Amount>300</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>May</mx:Month>

       <mx:Profit>1000</mx:Profit>

       <mx:Expenses>450</mx:Expenses>

       <mx:Amount>250</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>June</mx:Month>

       <mx:Profit>2000</mx:Profit>

       <mx:Expenses>500</mx:Expenses>

       <mx:Amount>700</mx:Amount>

     </mx:Object>

  </mx:Array>

（2）       collection

可以排序，增删，过滤。并且和图可以绑定同步。

<mx:ArrayCollection id="expenses">

     <mx:Object>

       <mx:Month>January</mx:Month>

       <mx:Profit>2000</mx:Profit>

       <mx:Expenses>1500</mx:Expenses>

       <mx:Amount>450</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>February</mx:Month>

       <mx:Profit>1000</mx:Profit>

       <mx:Expenses>200</mx:Expenses>

       <mx:Amount>600</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>March</mx:Month>

       <mx:Profit>1500</mx:Profit>

       <mx:Expenses>500</mx:Expenses>

       <mx:Amount>300</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>April</mx:Month>

       <mx:Profit>500</mx:Profit>

       <mx:Expenses>300</mx:Expenses>

       <mx:Amount>300</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>May</mx:Month>

       <mx:Profit>1000</mx:Profit>

       <mx:Expenses>450</mx:Expenses>

       <mx:Amount>250</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>June</mx:Month>

       <mx:Profit>2000</mx:Profit>

       <mx:Expenses>500</mx:Expenses>

       <mx:Amount>700</mx:Amount>

     </mx:Object>

  </mx:ArrayCollection>

（3）       随机数据 Math. Random

（4）       结构化数据：例如memory例子。

8．Areachart：

form属性决定形式:segment, step, reverSegment,vertical, horizontal

8.       padding:属性 paddingleft,paddingright,paddingtop,paddingbottom,gutterLeft,gutterRight,gutterTop,gutterBottom(chart 属性)

9.       labelGap: AxisRender属性

10.   tickPlacement minorTickPlacement：AxisRender属性，共有4个值inside，cross，none,outside

tickLength,minorTickLength：AxisRender属性，决定标记长度

showLine：AxisRender属性，是否显示坐标轴。

Showlabels：AxisRender属性，是否显示label

AxisStroke：AxisRender属性，引用一个stroke对象显示，决定颜色，透明度等。

11.   Stroke参数：color，weight，alpha。

Stroke可以用于AxisRender，xxxSeries，linestroke（lineSeries）

12.   fills（Series属性）：作用是如何填充seriesItem，定制背景色，可以是固定或者渐变的效果。此外，fillFunction可以在 series中代替fills。

Fills,如果是一个则所有的series取同一值，如果是数组则循环取值。

除了HLCOSeries，都支持fills属性。

Fills可以在series{}内用引用，也可以<fills><solidcolor><solidcolor><solidcolor>…</fills>

13.   fills如果在chart属性中，则表示背景色。

14.   在css中使用fills，.mychartstyle{fill:#00ff00},在styleName中引用mychartstyle。

15.   如果在css中使用数组：.mychartstyle{fill:#00ff00,#ff0000,#0000ff…}

16.   在fill属性中有linergradient和radialgradient定义渐变，需要具体的GradientEntity。

17.   filters属性加背景投影。如果不想要投影，<mx:seriesFilters><mx:Array/>< /mx:seriesFilters>

18.   gridline，在backgroundElements或annotationElements中使用，表示格线。Gridline可以由以下属性表示：horizontalAlternateFill horizontalChangeCount orizontalOriginCount horizontalShowOrigin horiztontalTickAligned verticalAlternateFill verticalChangeCount verticalOriginCount verticalShowOrigin verticalTickAligned

19.   如果不想要格线，设置backgroundElements的元素为空数组。

20.   如果要让label字体倾斜，需要引入新的ttf字体，在render中指定，否则只能是竖直的标签。

21.   chartItem代表了一个点，包括数据和render。通过改变series中的itemrender属性，指定它的 itemRenderer="mx.charts.renderers.CrossItemRenderer"，或者通过as的setStyle方法，指定series.setStyle(‘itemRenderer’,new FactoryClass(mx.charts.renderers.CrossItemRenderer));

22.   LineSeries指定两个render：itemRender指定数据的render，lineSegmentRender指定线之间的分割。

AreaSeries指定两个render：areaRender指定area的外观，itemRender指定data的外观。

23.   创建自定义的render，继承ProgramicSkin实现IDataRender接口。

24.   categoryAxis：提供了离散的分类数据，它的dataprovider属性可以是label数组或对象数组。

NumbericAxis：将一组连续的坐标点映射到坐标系中。你经常使用如下三种NumbericAxis：LinerAxis, LogAxis, DateTimeAxis。

DateTimeAxis：支持的数据类型有：date，string，number。通过parseFunction属性可以返回一个date对象。

可以设置DateTimeAxis的最大值和最小值，但是必须是date类型的。

25.   titleRender可以改变title外观。通常继承ChartLabel创建一个个性化的title，重写createChild和 updateDisplayList方法。

26.   将axisRender的showLabels属性设置为false，可以不显示label。

还可以使用labelFunction(XXXAxis的属性)来定义回调函数。

27.   BarSeries,columnSeries,pieseries支持datalabel。设置XXXseries的labelPosition属性 “inside，outside”等可以显示datalabel。dataLabel的数值可以是LabelField，LabelFunction的数值。

28.   Datatip Object：

设置xxxchart的showdatatip为true。

设置DataTip的style可以修改datatip的样式。

Xxxchart的dataTipFunction属性可以定义回调函数，改变datatip的样式。其中hitdata.item指的是 xxxSeriesItem。Hitdata.element指的是xxxSeries。

还可以用datatiprender引用一个render来描述datatip。

29.通过调用xxxSeries的fillFunction回调函数来定制每一个item（per-item）的样式，例如根据 threadhold显示不同的颜色。该函数返回一个fill对象，可以是solidcolor、LinearGradient、 RadialGradient。

30.设置axis的baseAtZero为false，由系统自动决定起始点。

31.chart的type属性：

cluster：Barchart和columnchart

overlaid：areachart

100%：累积到100%

stacked：聚集

32. legend:每一项都是ledenditem包括marker和label两部分。缺省情况下，legend使用control的 displayName和fills属性填充自己。可以客户化legend通过                 

     <mx:Legend>

        <mx:LegendItem label="SMITH" fontWeight="bold">

           <mx:fill>

            <mx:SolidColor color="{smithColor}"/>

           </mx:fill>

           <mx:stroke>

            <mx:Stroke color="0xCCCCCC" weight="2"/>

           </mx:stroke>

        </mx:LegendItem>

        <mx:LegendItem label="DECKER" fontWeight="bold">

           <mx:fill>

            <mx:SolidColor color="{deckerColor}"/>

           </mx:fill>

           <mx:stroke>

            <mx:Stroke color="0xCCCCCC" weight="2"/>

           </mx:stroke>

         </mx:LegendItem>

     </mx:Legend>

32.chart支持Mouseevent、chartevent、chartitemevent

33.通过设置xxxSeries的interactive="false"可以屏蔽用户交互事件的发生。但是这样就无法显示datatip，也无法通过触发事件或调用findDataPoints()发送hitdata对象

34.chart支持的特效有Fade、zoom、slide。

Chart支持标准的效果触发器，如showeffect和hideeffect。

XXXchart有的Effect属性有creationCompleteEffect、hideEffect、showEffect。

ChartSeries独有的Effect是hideDataEffect和showDataEffect，他们是Series的属性。当数据源发生改变时效果被触发。

Charting独有的效果SeriesInterpolate, SeriesSlide, and SeriesZoom.

35.charting effect的公共属性：

duration：完成效果的时间。

elementOffset：element之间效果的间隔。默认50毫秒。

minimumElementDuration：单个element完成需要花费的时间。

Offset：推迟开始的时间。

36.  SeriesZoom Effect：horizontalFocus，verticalFocus，relativeTo。

37.  可以通过series的setStyle（’showEffect’, rearrangeData）设置属性。其中rearrangeData = new SeriesInterpolate();

38.  还可以通过设置CSS，来引入Effect。

39.  通过BindingUtils.bindproperty方法来绑定slider和effect的属性。

40.  通过hitdata可以获得

hitData = event.hitData;

chartItem = ColumnSeriesItem(hitData.chartItem);

renderer = chartItem.itemRenderer;

series = ColumnSeries(hitData.element);

41.   drill-down两种方法：（1）改变dataprovider的数据源（2）重新组合数据传给dataprovider

42.     一个chartItem代表了series中的一个实体数据，series是有chartItem组合成的。

43.   如果要对chart的item进行选择，需要设置selectionModel（none,single,multiple）。还要设置series的 selectable属性为true。

44.   chartitem的选择有几种形式：鼠标选择、键盘选择、区域选择、编程选择。

45.   可以通过series的selectedIndices得到选择的items。Series有以下select的属性

selectedItem

selectedItems

selectedIndex

selectedIndices

46.   编程实现selection不会触发change事件。

47.   chartbase类，有以下方法可以选择item。

getNextItem()

getPreviousItem()

getFirstItem()

getLastItem()

通过selectedChartItem，selectedChartItems方法可以得到选择的item，但是不能set，这是只读方法。

48.   chartItem的currentStatus属性包括none, rollOver, selected, disabled, focusedSelected, and focused。

49.   chart的getItemsInRegion()方法返回一个矩形中的所有的items。但是该方法不会触发change事件，也不会改变items的 status。

50.   通过chartItem访问相关的数据。

强制转换成相应的item类型：var csi:ColumnSeriesItem = ColumnSeriesItem(a[i]);

csi.yValue：得到相应的y轴的数据。

Csi.item.Profile：得到对应的item的数据。

Csi.element：得到相应的series。

51.   以下属性改变通过用户交互改变是，触发change事件：

selectedChartItem and selectedChartItems (on the chart)

selectedItem, selectedItems, selectedIndex, and selectedIndices (on the chart&apos;s series)

52.   chartItem的拖拽：

（1）       拖拽源chart的dragEnable属性设置为true；

（2）       目标chart的dropEnable属性设置为false

（3）       在目标chart添加dragEnter和dragDrop监听器

（4）       在dragEnter事件的处理器中，得到目标chart的引用，并且将他在DragManager中注册。调用 DragManager.acceptDragDrop()接受事件。

（5）       在drop事件处理器中，得到拖拽chart item的数组，并且将它加入到目标chart的dataprovider中。

53.   在chart上边添加图形，用以下两个类CartesianDataCanvas、PolarDataCanvas，你可以

在canvas上添加图形或者直接在上边画图。通过addDataChild()方法可以添加DisplayObject到canvas上边，你也可以用addChild和addChildAt方法。用canvas的updateDataChild方法更新DisplayObject的位置。

可以直接通过画图的方法，例如lineTo,MoveTo,curveTo,drawRec….

调用canvas的clear、removeChild、removeChildAt方法来清除对象。

54.   Canvas可以是前景也可以是背景。把canvas加入到annotationElement中就是前景，加入到backgroundElements 就是背景。

55.   使用data canvas中两点限制：（1）不支持拖拽（2）不能使用select API

如果要在canvas加上offset，需要在addDataChild的方法中加入CartesianCanvasValue的对象。入下：canvas.addDataChild(columnLabel,

            new CartesianCanvasValue(s, labelOffset),

            new CartesianCanvasValue(n, labelOffset)
分享到：
| 中国地图素材
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    flex chart

    至于 "工具" 标签，可能指的是与 Flex 开发相关的工具，如 Flex Builder（现为 Flash Builder）或 IntelliJ IDEA 等集成开发环境（IDE），这些工具提供了图形化界面，使得创建和调试 Flex 应用程序更加便捷。...

    Flex Chart 使用教程(含源代码)

    "FlexChart使用教程.doc"可能包含详细的步骤说明和代码示例，教你如何创建、配置和定制Flex Chart。而"FlexDemo"可能是一个实际的Flex项目，包含完整的MXML和ActionScript代码，供学习者参考和运行。 五、进阶技巧 ...

    Flex chart line 线性表（单线和双线）

    Flex Chart Line是Adobe Flex框架中的一个关键组件，用于创建数据可视化图表，特别是线性图表。在本场景中，我们关注的是“单线”和“双线”两种类型的线性图表。Flex 4.5是Adobe Flex SDK的一个版本，它提供了更...

    FlexChart平均线代码

    FlexChart是Adobe Flex框架中的一个图表组件，用于创建各种数据可视化图表。在描述中提到的“FlexChart平均线代码”是指使用FlexChart来绘制平均线图表的源代码。这个平均线可能指的是移动平均线，一种在金融数据...

    去除flex chart 水印方法

    ### 去除Flex Chart水印方法 #### 知识点概述 在使用Flex Builder创建图表（Chart）的过程中，很多开发者会遇到一个普遍的问题：如何有效地去除试用版中的水印。Flex Builder作为Adobe推出的一款功能强大的开发...

    FlexChart使用教程

    ### FlexChart使用教程详解 #### 一、Flex与RIA背景介绍 随着互联网技术的发展，用户对Web应用的要求越来越高，不仅需要高效稳定的功能性服务，还需要更丰富的用户体验。这就是所谓的RIA（Rich Internet ...

    flex 改变linechart datatips 显示样式代码

    Datatips是LineChart中的一个重要特性，它会在鼠标悬停在数据点上时显示相关信息。本篇将详细介绍如何改变Flex LineChart的Datatips显示样式，包括字体大小以及自定义其他样式。 Flex中的Datatips默认样式可能不能...

    flex LineChart

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

    flex chart explorer

    标签“flex 图表”表明了这个压缩包内容与使用Flex框架创建图表有关。Flex图表组件是Flex SDK的一部分，提供了一套强大的API，允许开发者通过XML或代码来定义图表的数据源、样式、颜色、动画等特性。 压缩包内的...

    flex LineChart实例

    根据提供的文件信息，我们可以从标题、描述以及部分代码中提炼出与Flex LineChart相关的知识点。 ### Flex LineChart实例 #### 标题理解 标题“Flex LineChart实例”明确指出这是一个关于Flex框架下的线形图（Line...

    关于flex中chart的效果例子

    在这个例子中，我们可以查找有关Chart组件的信息，如其名称、描述、依赖关系等。通过分析这个XML文件，开发者可以了解如何在代码中引用和配置这些图表组件。 接下来是`locale`文件夹，它通常包含与特定语言和地区...

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

    Flex的BarChart组件提供了这种功能，可以设置bar间隙、颜色、数据标签等属性，以满足不同的视觉效果需求。 **折线图（Line Chart）** 折线图通过连接一系列数据点来展示数据趋势，特别适用于显示随时间变化的趋势。...

    FusionChartsforFlex破解

    3. 创建图表实例：在MXML或AS3代码中创建`FusionCharts`对象，并设置其属性，如`chartId`、`width`、`height`和`dataSource`。 4. 准备XML数据：创建XML文件来定义图表类型、标题、轴、数据系列等。 5. 加载数据：...

    【实例】flex4 动态获取对象属性，动态生成数据源，动态生成lineChart，清除数据。

    flex4 动态获取对象属性，动态生成数据源，动态生成lineChart，清除数据。 1.该图表的数据源为ArrayCollection类型的arrayC 2.每增加一条线，其实就是增加一个数据源中的ArrayCollection每个对象的一个属性，且属性...

    orgchart flex

    "orgchart flex" 提供了一种高效的方法来展示流程图、组织机构图以及工作流。本文将深入探讨Flex AS3环境下如何创建和实现这些图形。 一、Flex简介 Flex是由Adobe开发的一款开源框架，主要用于构建富互联网应用程序...

    flex多曲线图，实时更新

    1. 曲线滚动：Flex Chart组件默认支持滚动，只需设置Chart的scrollPolicy属性为"on"。如果需要手动控制滚动，可以使用Chart的horizontalScrollPosition和verticalScrollPosition属性。 2. 鼠标悬停显示值：通过设置...

    Flex报表

    标题“Flex报表”暗示我们即将探讨的是Adobe Flex中与报表相关的技术。Flex是一种基于ActionScript的开源框架，用于构建富互联网应用程序（RIA）。在Flex中，报表通常用于展示和分析数据，提供各种图表和表格视图，...

    flex统计图 柱状 饼图折线

    首先，你需要定义一个Chart组件，并设置其dataProvider属性为包含数据的对象数组。每个对象应有一个与BarSeries映射的属性，该属性的值将决定柱子的高度。通过调整BarSeries的orientation属性，可以设置柱状图为竖直...

    Chart_Explorer

    4. **Charts组件**：Flex提供了一系列预定义的图表组件，如ColumnChart、LineChart、PieChart等，开发者可以通过调整属性和事件来定制这些图表。 5. **数据绑定**：在Flex中，数据绑定允许开发者将数据源与图表元素...

Magicbox
Global site tag (gtag.js) - Google Analytics