flex图表LineChart讲解

合集下载

Chart

Flex chart学习笔记(2008-12-26 18:01:04)1. chart：总体控制2. series：定义什么样的数据来展示，x,y轴分别显示什么数据。

它是包含相应的seriesItem 的Array。

SeriesItem封装了极值点，填充方式，xy数据等。

3. series 中displayName属性控制tooltip4. barest->barseries, columnset->columnset5. categoryAxis将某列数据映射到轴上linerAxis自定义轴数据，最大值和最小值logAxis用对数形式datetimeAxis6. 通过axixrender更改轴的外观specified by the horizontalAxisRenderers or verticalAxisRenderers7. chartdata的数据源：scriptblock，xml，remoteobject，webservice，Httpservice，MXML数据源类型：（1）static Arrayprivate 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:ObjectMonth="January"Profit="2000"Expenses="1500"Amount="450"/><mx:ObjectMonth="February"Profit="1000"Expenses="200"Amount="600"/><mx:ObjectMonth="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>June</mx:Month><mx:Profit>2000</mx:Profit><mx:Expenses>500</mx:Expenses><mx:Amount>700</mx:Amount></mx:Object></mx:Array>（2）collection可以排序，增删，过滤。

Flex从入门到精通第24章

24.1.2 序列类，坐标轴类和图表事件
序列类（Series Class）用来定义什么数据要在图表控件中显示。所有的序列类都是 mx.charts.chartClasses.Series类的子类。每种图表类型都有自己特有的序列类。例如条形图表控件就有相应的 BarSeries类来为BarChart控件定义数据。一个序列的首要目的是定义在图表中显示的数据。使用序列定义在数据源中的哪一部分应该用来显示图表X、Y轴上的数据。它使用xField和yField属性来定义。每个序列都有一组序列项目组成的。当建立一个新的序列时，就定义 displayName属性，此属性显示其序列，例如数据提示。通常图表只定义一种序列，编程者也可以使用第二个序列。
24.1 图表组件概览
一个简单的图表表达了一个单个的数据序列。一个序列是一系列的相关的数据点。例如，一个数据序列可以是一个年度报告中的月销售额，或者酒店每日的入住率。这些数据都由在二维象限的图形，更直接，清晰的表现出来。
24.1.1 使用图表组件
Flex提供了大量的控件来显示图表。除了饼图表之外的图表控件都是CartesianChart 类的子类。笛卡尔（Cartesian）图表是指在一个方形的区域，二维象限的空间来表现一组数据。饼图表是PolarChart类的子类，极面（Polar）图表在一个圆形的区域显示数据。
BubbleChart控件每个数据点都显示了三项数据：一个定义x坐标位置的值；一个定义y坐标位置的值；一个定义图表符号相对于其它数据点大小的值。使用BubbleSeries图表序列来定义 BubbleChart控件的数据。
24.2.4 蜡烛图表（Candlestick Chart）示例 CandlestickChart控件显示了金融数据为一系列蜡烛图，以体现其高，低，开和关的数值。每个蜡烛图垂直线上的上顶和下底代表了每个数据点高和低的数据值，填充盒子的上顶和下底代表开放和关闭的数值。基于每个数据点关闭的数值相对开发的数值是高，还是低，每个蜡烛图就被不同方式填充。 CandlestickChart控件的CandlestickSeries需要所有四项数据：高，低，开，关。

FLEX画图之各种柱状图饼状图画法

先上几张图代码如下 flex4.5<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="/mxml/2009"xmlns:s="library:///flex/spark"xmlns:mx="library:///flex/mx" width="100%" height="100%" creationComplete="init()" ><fx:Script><![CDATA[/*** 5.扇形图*/import mx.events.FlexEvent;import mx.states.AddChild;private var sector:Sprite=new Sprite();private function drawSector(x:Number, y:Number, r:Number, R:Number, angle:Number, startA:Number):void{sector.graphics.clear();sector.graphics.lineStyle(1,0,1,true);sector.graphics.beginFill(0,0.5);if(Math.abs(angle)>360){angle=360;}var n:Number=Math.ceil(Math.abs(angle)/45);var angleA:Number=angle/n;angleA=angleA*Math.PI/180;startA=startA*Math.PI/180;var startB:Number=startA;sector.graphics.moveTo(x+r*Math.cos(startA),y+r*Math.sin(startA)) ;sector.graphics.lineTo(x+R*Math.cos(startA),y+R*Math.sin(startA)) ;for(var i:int=1;i<n;i++){startA+=angleA;var angleMid1:Number=startA-angleA/2;var bx:Number=x+R/Math.cos(angleA/2)*Math.cos(angleMid1);varby:Number=y+R/Math.cos(angleA/2)*Math.sin(angleMid1);var cx:Number=x+R*Math.cos(startA);var cy:Number=y+R*Math.sin(startA);sector.graphics.curveTo(bx, by, cx, cy);}// 内圆起点sector.graphics.lineTo(x+r*Math.cos(startA),y+r *Math.sin(startA));// 内圆弧for (var j:int=n;j>1;j--){startA-=angleA;var angleMid2:Number=startA+angleA/2;varbx2:Number=x+r/Math.cos(angleA/2)*Math.cos(angleMid2);varby2:Number=y+r/Math.cos(angleA/2)*Math.sin(angleMid2);var cx2:Number=x+r*Math.cos(startA);var cy2:Number=y+r*Math.sin(startA);sector.graphics.curveTo(bx2, by2, cx2, cy2);}//内圆终点sector.graphics.lineTo(x+r*Math.cos(startB),y+r*Math.sin(startB));//完成sector.graphics.endFill();}protected function button1_clickHandler():void{drawSector(200,200,50,100,-105,-30);con.addChild(sector);}/************************************************************************ *********** 6.环形分块图*********************************************************************** ***********/import mx.effects.easing.*;import mx.charts.series.items.PieSeriesItem;import mx.charts.events.ChartItemEvent;private functionpieChart_itemClick(evt:ChartItemEvent):void {var item:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;var degrees:Number = radiansToDegrees(item.startAngle);var arr:Array = [];if (checkBox.selected) {arr[item.index] = 0.2;}pieSeries.perWedgeExplodeRadius = arr;pieSeries.startAngle -= degrees;dp.refresh();}private function radiansToDegrees(radians:Number):Number { return radians * (180 / Math.PI);}[Bindable]private var arr:Array = [{id:1,city:'北京',money:1000,pay:300},{id:2,city:'上海',money:1200,pay:500},{id:3,city:'天津',money:800,pay:200}];import mx.charts.chartClasses.IAxis;import mx.formatters.CurrencyFormatter;/*** 7.flex 画线 1*/private var currFormatter:CurrencyFormatter;private function init():void {currFormatter = new CurrencyFormatter();currFormatter.precision = 2;}private function linearAxis_labelFunc(item:Object, previousValue:Object, axis:IAxis):String {currFormatter = new CurrencyFormatter();currFormatter.precision = 2;return currFormatter.format(item);}private function lineChart_creationComplete():void {var linearAxisMinimum:int =Math.floor(putedMinimum);var linearAxisMaximum:int =Math.ceil(putedMaximum);linearAxis.minimum = linearAxisMinimum;linearAxis.maximum = linearAxisMaximum;}/*** 8.flex 画线 2*/import mx.charts.CategoryAxis;import mx.charts.chartClasses.IAxis;private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String { var datNum:Number = Date.parse(item);var tempDate:Date = new Date(datNum);return tempDate.date.toString();}import mx.charts.series.items.PieSeriesItem;import mx.charts.HitData;import mx.utils.StringUtil;private function pieSeries_labelFunc(item:Object,field:String, index:Number, percentValue:Number):String {return StringUtil.substitute("{0} ({1}%)",item.@label,percentValue.toFixed(1));}]]></fx:Script><fx:Declarations><mx:XMLListCollection id="dp"><fx:XMLList><product label="Product 1" data="3" /><product label="Product 2" data="1" /><product label="Product 3" data="4" /><product label="Product 4" data="1" /><product label="Product 5" data="5" /><product label="Product 6" data="9" /></fx:XMLList></mx:XMLListCollection></fx:Declarations><fx:Declarations><mx:XMLListCollection id="dpLine"><mx:source><fx:XMLList><quote date="8/27/2007" open="40.38" close="40.81" /><quote date="8/24/2007" open="40.5" close="40.41" /><quote date="8/23/2007" open="40.82" close="40.6" /><quote date="8/22/2007" open="40.4" close="40.77" /><quote date="8/21/2007" open="40.41" close="40.13" /><quote date="8/20/2007" open="40.55" close="40.74" /><quote date="8/17/2007" open="40.18" close="40.32" /><quote date="8/16/2007" open="39.83" close="39.96" /><quote date="8/15/2007" open="40.22" close="40.18" /><quote date="8/14/2007" open="41.01" close="40.41" /><quote date="8/13/2007" open="41" close="40.83" /><quote date="8/10/2007" open="41.3" close="41.06" /><quote date="8/9/2007" open="39.9" close="40.75" /><quote date="8/8/2007" open="39.61" close="40.23" /><quote date="8/7/2007" open="39.08" close="39.42" /><quote date="8/6/2007" open="38.71" close="39.38" /><quote date="8/3/2007" open="39.47" close="38.75" /><quote date="8/2/2007" open="39.4" close="39.52" /><quote date="8/1/2007" open="40.29" close="39.58" /> </fx:XMLList></mx:source></mx:XMLListCollection></fx:Declarations><fx:Declarations><mx:XMLListCollection id="dpLine2"><mx:source><fx:XMLList><quote date="8/1/2007" open="40.29" close="39.58" /><quote date="8/2/2007" open="39.4" close="39.52" /><quote date="8/3/2007" open="39.47" close="38.75" /><quote date="8/6/2007" open="38.71" close="39.38" /><quote date="8/7/2007" open="39.08" close="39.42" /><quote date="8/8/2007" open="39.61" close="40.23" /><quote date="8/9/2007" open="39.9" close="40.75" /><quote date="8/10/2007" open="41.3" close="41.06" /><quote date="8/13/2007" open="41" close="40.83" /><quote date="8/14/2007" open="41.01" close="40.41" /><quote date="8/15/2007" open="40.22" close="40.18" /><quote date="8/16/2007" open="39.83" close="39.96" /><quote date="8/17/2007" open="40.18" close="40.32" /><quote date="8/20/2007" open="40.55" close="40.74" /><quote date="8/21/2007" open="40.41" close="40.13" /><quote date="8/22/2007" open="40.4" close="40.77" /><quote date="8/23/2007" open="40.82" close="40.6" /><quote date="8/24/2007" open="40.5" close="40.41" /><quote date="8/27/2007" open="40.38" close="40.81" /> </fx:XMLList></mx:source></mx:XMLListCollection></fx:Declarations><fx:Declarations><mx:XMLListCollection id="dp4"><mx:source><fx:XMLList><product label="Product 1" data="3" data1="2"/><product label="Product 2" data="6" data1="7"/><product label="Product 3" data="4" data1="5"/><product label="Product 4" data="1" data1="2"/><product label="Product 5" data="3" data1="1"/><product label="Product 6" data="6" data1="4"/> </fx:XMLList></mx:source></mx:XMLListCollection></fx:Declarations><s:layout><s:BasicLayout/></s:layout><mx:Canvas width="100%" height="100%"horizontalScrollPolicy="off"><mx:VBox width="100%" height="100%"horizontalScrollPolicy="auto" ><mx:HBox><mx:BarChart x="110" y="27" id="barchart1"dataProvider="{arr}" showDataTips="true" selectionMode="single"><mx:series><mx:BarSeries displayName="收入" xField="money" /><mx:BarSeries displayName="支出" xField="pay" /></mx:series><mx:verticalAxis><mx:CategoryAxis categoryField="city" /></mx:verticalAxis></mx:BarChart><mx:Legend dataProvider="{barchart1}"/><mx:BarChart alpha="0.5" x="110" y="27" id="barchart2" dataProvider="{arr}" showDataTips="true" selectionMode="single"><mx:series><mx:BarSeries displayName="收入" xField="money" /><mx:BarSeries displayName="支出" xField="pay" /></mx:series><mx:verticalAxis><mx:CategoryAxis categoryField="city" /></mx:verticalAxis><mx:rollOverEffect><s:Fade alphaFrom="0.5" alphaTo="1"duration="1000" /></mx:rollOverEffect><mx:rollOutEffect><s:Fade alphaFrom="1" alphaTo="0.5"duration="1000" /></mx:rollOutEffect></mx:BarChart><mx:Legend dataProvider="{barchart1}"/></mx:HBox><mx:HBox><mx:PieChart x="110" y="51" id="piechart1"dataProvider="{arr}" showAllDataTips="true" selectionMode="single"><mx:series><mx:PieSeries displayName="Series 1"field="money" labelPosition="callout" labelField="city"nameField="city" /></mx:series></mx:PieChart><mx:Legend dataProvider="{piechart1}"direction="horizontal" labelPlacement="right" /><mx:ColumnChart x="100" y="90" id="columnchart1" dataProvider="{arr}" showDataTips="true" selectionMode="single"><mx:horizontalAxis><mx:CategoryAxis categoryField="city" /></mx:horizontalAxis><mx:series><mx:ColumnSeries displayName="收入"yField="money"/><mx:ColumnSeries displayName="支出" yField="pay"/></mx:series></mx:ColumnChart><mx:Legend dataProvider="{columnchart1}"/></mx:HBox><mx:HBox><s:Button label="按钮" click="button1_clickHandler()"/> </mx:HBox><mx:HBox><mx:ApplicationControlBar dock="true"><mx:CheckBox id="checkBox"label="Use perWedgeExplodeRadius:"labelPlacement="left"selected="true" /></mx:ApplicationControlBar><mx:PieChart id="pieChart"dataProvider="{dp}"showDataTips="true"itemClick="pieChart_itemClick(event);"height="100%"width="100%" ><mx:series><mx:PieSeries id="pieSeries"field="@data"nameField="@label"><mx:showDataEffect><mx:SeriesInterpolate duration="1500"easingFunction="{Elastic.easeOut}" /></mx:showDataEffect><mx:filters><mx:DropShadowFilter/></mx:filters></mx:PieSeries></mx:series></mx:PieChart><mx:Legend dataProvider="{pieChart}"direction="horizontal" /></mx:HBox><mx:HBox><mx:ApplicationControlBar dock="true"><mx:Form styleName="plain"><mx:FormItem label="minimum:"><mx:HSlider id="minSlider"minimum="28"maximum="38"value="38"liveDragging="true"snapInterval="1"change="linearAxis.minimum = event.value;" /></mx:FormItem><mx:FormItem label="maximum:"><mx:HSlider id="maxSlider"minimum="42"maximum="52"value="42"liveDragging="true"snapInterval="1"change="linearAxis.maximum = event.value;" /></mx:FormItem></mx:Form><mx:Spacer width="100%" /><mx:Legend dataProvider="{lineChart}"direction="horizontal" /></mx:ApplicationControlBar><mx:LineChart id="lineChart"showDataTips="true"dataProvider="{dpLine}"width="100%"height="100%"creationComplete="lineChart_creationComplete();"><mx:backgroundElements><mx:GridLines id="gridLines"verticalTickAligned="false"><mx:verticalStroke><mx:SolidColorStroke color="haloSilver"weight="0"alpha="1.0" /></mx:verticalStroke><mx:horizontalStroke><mx:SolidColorStroke color="white"weight="0"alpha="0.0" /></mx:horizontalStroke><mx:horizontalFill><mx:SolidColor color="haloSilver"alpha="0.1" /></mx:horizontalFill></mx:GridLines></mx:backgroundElements><mx:verticalAxis><mx:LinearAxis id="linearAxis"baseAtZero="false"title="Price (USD)"minorInterval="0.10"interval="0.5"labelFunction="linearAxis_labelFunc" /></mx:verticalAxis><mx:horizontalAxis><mx:CategoryAxis id="ca"categoryField="@date"title="Date" /></mx:horizontalAxis><mx:horizontalAxisRenderers><mx:AxisRenderer axis="{ca}"canDropLabels="true" /></mx:horizontalAxisRenderers><mx:series><mx:LineSeries yField="@open"displayName="Open" /></mx:series></mx:LineChart></mx:HBox><mx:HBox><mx:ApplicationControlBar dock="true"><mx:Form styleName="plain"><mx:FormItem label="direction:"><mx:ComboBox id="comboBox"><mx:dataProvider><fx:Array><fx:Object label="both" /><fx:Object label="horizontal" /><fx:Object label="vertical" /></fx:Array></mx:dataProvider></mx:ComboBox></mx:FormItem><mx:FormItem label="horizontalTickAligned:"><mx:CheckBox id="hCheckBox" selected="true" /></mx:FormItem><mx:FormItem label="verticalTickAligned:"><mx:CheckBox id="vCheckBox" selected="true" /></mx:FormItem></mx:Form></mx:ApplicationControlBar><mx:LineChart id="lineChart2"showDataTips="true"dataProvider="{dpLine2}"width="100%"height="100%"><mx:backgroundElements><mx:GridLineshorizontalTickAligned="{hCheckBox.selected}"verticalTickAligned="{vCheckBox.selected}"><mx:horizontalFill><mx:SolidColor color="haloBlue"alpha="0.2" /></mx:horizontalFill><mx:horizontalAlternateFill><mx:SolidColor color="haloSilver"alpha="0.2" /></mx:horizontalAlternateFill><mx:verticalFill><mx:SolidColor color="haloBlue"alpha="0.2" /></mx:verticalFill><mx:verticalAlternateFill><mx:SolidColor color="haloSilver"alpha="0.2" /></mx:verticalAlternateFill></mx:GridLines></mx:backgroundElements><mx:verticalAxis><mx:LinearAxis baseAtZero="false"title="Price"labelFunction="linearAxis_labelFunc" /></mx:verticalAxis><mx:horizontalAxis><mx:CategoryAxis id="ca1"categoryField="@date"title="August 2007"labelFunction="categoryAxis_labelFunc" /></mx:horizontalAxis><mx:horizontalAxisRenderers><mx:AxisRenderer axis="{ca}" canDropLabels="true" /></mx:horizontalAxisRenderers><mx:series><mx:LineSeries yField="@open" displayName="Open" /><mx:LineSeries yField="@close"displayName="Close" /></mx:series><mx:seriesFilters><fx:Array/></mx:seriesFilters></mx:LineChart></mx:HBox><mx:HBox><mx:Canvas styleName="opaquePanel"width="700" height="420" borderColor="#600EE9" borderStyle="none"><mx:PieChart id="pieChart3"dataProvider="{dp4}"showDataTips="true"height="253"width="346" themeColor="#0A98F2" left="0" top="0"><mx:series><mx:PieSeries id="pieSeries3"field="@data"nameField="@label"visible="false" /><mx:PieSeries id="pieSeries1"field="@data1"nameField="@label"labelPosition="callout"labelFunction="pieSeries_labelFunc" /><mx:PieSeries id="pieSeries2" /><mx:PieSeries id="pieSeries4"field="@data"nameField="@label"labelPosition="callout" /></mx:series></mx:PieChart><mx:Legend dataProvider="{pieChart}"direction="horizontal"horizontalGap="100"width="98" x="416" y="35"borderStyle="none" borderThickness="3" borderColor="#078CE9"/></mx:Canvas></mx:HBox></mx:VBox></mx:Canvas><s:SpriteVisualElement id="con" x="216" y="146" width="480"height="312"/></s:Application>。

学习Flex统计图(chart)开发

Flex统计图（chart）开发学习笔记前言Flex中的Chart组件包括：本文前三小节主要阐述其中的ColumnChart、PieChart和Linechart，以数据源为XML 的形式为例解析图表制作过程，其他形式图表大同小异。

第四节是Chart图表进阶学习篇。

一．柱状图制作1.添加Components→Charts→ColumnChart2.添加字段3.在源代码中，加入数据集模型（数据源）<mx:Model id="dataSet" source="/data/sample_test.xml" />4.图表以及图例的数据绑定<mx:ColumnChart x="0" y="147" id="chart" width="100%" height="577" dataProvider="{dataSet.Sample}" styleName="styledColumnChart">其中加粗字体代表数据集模型与图表的绑定。

图例的数据绑定:<mx:Legend dataProvider="{chart}"/>5.设置横轴分类<mx:horizontalAxis><mx:CategoryAxis categoryField="month" /></mx:horizontalAxis>*按照数据源中的month字段作为横轴类型6. sample_test.xml数据源格式：7.图表风格设置<mx:ColumnChart x="0" y="147" id="chart" width="100%" height="577" dataProvider="{dataSet.Sample}" styleName="styledColumnChart">*按照styleName绑定<mx:Style>.styledColumnChart8.运行完的效果截图二．饼图制作1.添加Components→Charts→PieChart2.添加字段3.在源代码中，加入数据集模型（数据源）<mx:Model id="dataSet" source="/data/PieData.xml" />4.图表以及图例的数据绑定<mx:PieChart x="109"y="162" id="chart" dataProvider="{dataSet.Sample}">其中加粗字体代表数据集模型与图表的绑定。

第9章 Flex 4系统组件：图表

χ
1．条形图． Flex 4中使用BarChart组件创建条形图，使用BarSeries序列组件定义BarChart
Hale Waihona Puke 的数据。BarSeries的属性主要有以下几个。（1）xField （2）yField （3）minField （4）fill （5）stroke
（1）指定数据源。为BarChart组件指定数据源，本示例在<fx:Script>标签中使用ActionScript代码定义一个ArrayCollection类型的变量barChartData作为显示的数据源。在 <s:Application>标签下添加如下代码： <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var barChartData:ArrayCollection = new ArrayCollection( [ { month: "Jan", profit:550, amount: 50}, { month: "Feb", profit:1000, amount: 110}, { month: "Mar", profit:680, amount: 80} ]); ]]> </fx:Script>
折线图的效果如图所示。示例代码所示。
Flex使用PieChart组件创建饼图，使用PieSeries序列组件定义PieChart的数据。根据数据源中的数据确定每个数值在圆饼上所占的份额。PieSeries组件常用的属性如下所示。（1）field （2）nameField （3）labelFunction （4）labelField （5）labelPosition （6）calloutStroke （7）radialStroke （8）fills （9）stroke

使用Flex图表组件

使用Flex图表组件2009-05-09 13:25以图表或是图的方式显示数据的能力可以使得Flex程序用户的数据交互更为容易。

与仅显示简单的数字数据表不同，我们可以显示条状图，饼图，线图或是其他类型的图表，并且可以使用颜色，标题以及二维图形来表示我们的数据。

在这一部分我们会介绍Flex图表，菜单数据，以及我们可以在Flex中创建的其他类型的图表。

关于图表数据表示可以使得我们简化数据表示与数据关系的方式来表示数据。

图表是数据的一种类型，从而我们可以使用二维的图形来表示我们的数据。

Flex支持最常见的二维图形，例如条状图，柱状图，饼图，并且提供给我们对于图表显示的的极大控制。

一个简单的图表显示单一的数据系列，在这里系列是一组相关的数据点。

例如，一个数据系列也许是月度销售收益，或者是一天的旅馆占有率。

下面的图表显示了过去六个月的与销售收益相应的数据系列：JiniiJiv lM>rch 卜i&hl 」uni另一种图表也许会添加第二个数据系列。

例如，我们也许会包含过去六个月的利润。

下面的图表显示了两个数据系列，一个是销售，一个是利润：定义图表数据图表控件使用为图表定义数据的date Provider属性。

一个数据提供者(date provider)是一个对象的集合，与数组类似。

图表组件使用平的，或者是基于列表的，数据提供者，与一维数组类似。

一个数据提供者由两部分组成：一个数据对象集合与API。

数据提供者API是个类必须实现的方法与属性的集合，从而Flex组件可以将其看作数据提供者。

图表类型Flex支持最常见的一些图表类型，包括条状图，线图，饼图以及其他的类型。

这一部分描述Flex所提供的图表集合。

除了这些图表类型以外，我们还可以扩展笛卡尔图表控件还创建自定义的图表。

区域图表我们使用图表控件将数据表示为一个用与数据值相关的线来界定的区域。

下的区域用一种颜色或是一种类型来进行填充。

我们可以用图标或是符号来表示线上的每一个数据点，或者是不使用图标而仅用单一的线。

echarts 各种用法

echarts 各种用法ECharts是一款基于JavaScript的开源可视化图表库，拥有丰富的各种用法，让开发者能够轻松创建各种精美的图表。

以下是几种常见的ECharts用法。

1.线性图表（Line Chart）：线性图表是ECharts中最基本和常用的图表类型之一。

使用ECharts，您可以通过简单的配置选项创建漂亮的线性图表。

线性图表适用于展示随时间变化的数据趋势。

2.饼状图（Pie Chart）：饼状图在数据展示中非常常见，特别适用于显示不同类别或部分占整体的比例关系。

ECharts提供了丰富的样式和交互选项，使饼状图的展示更加生动直观。

3.柱状图（Bar Chart）：柱状图是一种常见的用于展示不同类别之间数量比较的图表类型。

使用ECharts创建柱状图非常简单，可以根据需求调整柱子的颜色、宽度等属性。

4.散点图（Scatter Chart）：散点图常用于显示两个数值之间的关系。

ECharts提供了灵活的配置选项，使散点图的点的大小、颜色可以根据数据进行动态的展示，有助于发现数据之间的关联。

5.雷达图（Radar Chart）：雷达图用于展示多个维度之间的差异。

ECharts允许您自定义雷达图每个维度的最大值和最小值，使得数据的差异更加清晰可见。

以上只是ECharts的一小部分用法，它还支持诸如地图、热力图、漏斗图等多种图表类型。

通过简单的配置，您可以根据不同的需求和数据类型选择适合的图表类型，并轻松创建出令人印象深刻的可视化效果。

ECharts具有强大的交互性和可定制性，支持响应式设计，可以在不同的设备和屏幕上自适应展示。

无论您是数据分析师、前端工程师还是普通用户，都可以通过ECharts轻松创建出美观、直观的图表，并展示您的数据或想法。

flex布局详解

flex布局详解flex布局详解说明flex 布局是CSS3中新增加的⼀套布局⽅案，属于⼀维布局模型。

flex提供了强⼤的空间分布和对齐能⼒。

想要理解和使⽤flex进⾏⽹页布局，需要先来学习和理解下⾯的⼏个概念：flex的两根轴线: 主轴和交叉轴flex容器和flex⼦元素基本概念的解释flex的两根轴线当使⽤flex进⾏布局的时候，⾸先需要了解的，就是flex的两根轴线：主轴和交叉轴。

为什么⼀定要理解这两个轴线呢，因为所有的flex属性都和这两根轴线有关系。

⼀般来说，元素在容器内部排列的顺序都是按照从左向右的顺序来进⾏排列的，⽽在flex中，决定元素排列的是主轴。

默认情况下flex中主轴上的元素排列⽅式和⾮flex情况下是⼀样的。

flex的特性，就是元素沿着主轴或者交叉轴进⾏排列。

flex容器和flex⼦元素想要使⽤flex布局⽅案，需要在容器属性上使⽤display:flex或者display:inline-flex。

⽽⼀旦设置了任意⼀个属性，那么这个标签就变成了flex容器，也可以称之为是弹性容器。

⽽相对应的，容器当中的⼦元素就变成了flex⼦元素也就是弹性⼦元素。

flex 的相应属性分类想要更⾼的学习和使⽤flex布局，需要了解flex中包含的属性。

⼀般来说，flex的属性可以分成两类:flex容器属性(flex-container)flex⼦元素属性(flex-item)所谓的flex容器属性就是将属性设置在flex容器上，⽽flex⼦元素则是将属性设置在⼦元素的⾝上。

flex容器属性flex-direction通过flex-direction属性，可以设置主轴的⽅向，它包括下⾯的⼏个值:row(默认值): 主轴为⽔平⽅向，项⽬排列起点在左端。

row-reverse: 主轴为⽔平⽅向，起点在右端。

column: 主轴为垂直⽅向，起点在上沿。

column-reverse: 主轴为垂直⽅向，起点在下沿。

第14章使用图表

14.5 烛形图表
烛形图表看起来比较复杂.在这样的图表中,数据的表达不仅仅是折线,图形的面积大小等单一的元素,而是利用类似于蜡烛的图形来表达数据. 以某公司的股票为例,这种类似于蜡烛的图形可以表示股票的开盘,收盘,最低和最高价格,如图所示.
14.1.2 轴线
在二维图表中,轴线(Axes)由X轴和Y轴组成.在图表组件中,轴线包括:轴类型,轴上的坐标,轴的标题等.X轴称为HorizontalAxis,Y轴称为VerticalAxis. Flex提供了4种类型的轴,分别为:CategoryAxis(类别轴),LinearAxis(线性轴),LogAxis(对数轴)和 DateTimeAxis(时间日期轴). CategoryAxis指在轴上的各个坐标都是逻辑性的名称命名, 而不是数字.例如,图表中的月份就可以使用 CategoryAxis. LinearAxis在轴上的坐标均为数字,该类轴可以定义轴的最大,最小值以及数值间隔. LogAxis用来在轴上显示对数. DateTimeAxis可在轴上显示时间和日期.
14.4.1 气泡形图表组件
气泡形图表对应的MXML标签为<mx:BubbleChart>.气泡形图表添加了maxRadius属性,该属性用来设定最大气泡半径, 即图表中最大一个气泡所对应的半径值.其他气泡的半径是根据与最大气泡的半径数值的比例计算得到的.当然, 这个不需要自己编写,图表组件会自动转换. 该组件对应的Series为<mx:BubbleSeries>,它的主要属性如表所示.
14.1.1 图表组件概述
Flex图表组件包括了条状图,饼图,线图以及其他目前常用的二维图表,主要有以下几种. 区域形图表(Area Chart) 线形图表(Line Chart) 气泡形图表(Bubble Chart) 烛形图表(Candlestick Chart) 柱形图表(Column Chart) 条形图表(Bar Chart) 高低开合形图表(HighLowOpenClose Chart) 饼形图表(Pie Chart) 绘形图表(Plot Chart)

各种图表的英文表达,拯救你的essay和presentation

各种图表的英文表达，拯救你的essay和presentation以下为常用实例，其中不少种类有多个名称，使用不同的近义词Bar chart或bar graph：条形图。

可横可竖。

通常对比不同类别，条形之间通常有距离，可改变组合。

如博物馆显示不同展区观众数量。

竖着时也叫column bar chart，即柱形图。

条形可分组对比，叫grouped bar chart。

条形可堆叠显示，叫stacked bar chart。

Gantt chart：甘特图、横道图。

进度计划常用。

PERT chart、program evaluation review technique或project evaluation review technique：性能评价图。

项目管理常用。

Histogram：直方图。

通常对比不同范围连续数据，条形靠在一起，不能改变顺序。

如，博物馆显示10分钟、20分钟、30分钟区间内观众百分比分布。

Line chart或line graph：折线图【不要翻译为曲线图，line在英文里通常是直线或线段，而不是曲线】。

Area chart或area graph：面积图。

内容类似折线图。

线段与横轴之间面积通常标记颜色等信息。

Pie chart或circle chart：饼图。

用于显示划分情况。

通常包括：立体的叫3D pie cake或perspective pie cake。

中空的叫doughnut chart，即圆环图或焦圈图。

小块分离的叫exploded pie chart。

Organizational chart、organization chart、org chart、organigram、organigramme：组织机构图。

Flowchart：流程图。

Tree chart、tree structure或tree diagram：树状结构图。

Pedigree chart：谱系图。

其它领域也会用chart来表达，如record chart指音乐排行榜；chordchart指和弦乐谱等。

flex的3行3例 -回复

flex的3行3例-回复什么是Flex？Flex，全称为Flexible Box Layout Module，是CSS3中的一种新布局模块。

它提供了一种灵活的方式来对容器中的项目进行布局、对齐和分布。

Flex布局可以轻松实现响应式设计，可以在不同的屏幕分辨率和设备上提供良好的显示效果。

本文将在1500-2000字的篇幅中，一步一步地解释Flex布局的基本概念、属性和用法。

第一行：什么是Flex布局？Flex布局是CSS3中的一种新的布局方式，用于在容器中对项目进行灵活的排列和分布。

通过使用Flex布局，可以轻松实现响应式设计和自适应布局。

Flex布局包含两个重要的组成部分，即容器和项目。

容器被称为Flex 容器，项目则称为Flex项目。

通过设置不同的属性和值，可以实现项目的排列、对齐、分布等效果。

第二行：Flex布局的基本属性在Flex布局中，有很多属性可以用来控制容器和项目的表现。

以下是一些常用的Flex布局属性：1. flex-direction：控制Flex容器的主轴方向。

默认值为row，表示主轴为水平方向。

可以设置为row-reverse（水平反向排列）、column（垂直排列）和column-reverse（垂直反向排列）等。

2. flex-wrap：控制Flex项目的换行规则。

默认值为nowrap，表示不换行。

可以设置为wrap（换行）和wrap-reverse（反向换行）。

3. justify-content：控制Flex项目在主轴方向上的对齐方式。

默认值为flex-start，表示靠左对齐。

可以设置为flex-end（靠右对齐）、center（居中对齐）、space-between（两端对齐，项目之间间距相等）和space-around（每个项目两侧的空间相等）等。

4. align-items：控制Flex项目在交叉轴方向上的对齐方式。

默认值为stretch，表示拉伸填满交叉轴。

Flash图表控件FusionCharts如何定制图表中的趋势线和趋势区

Flash图表控件FusionCharts使用教程：定制图表中的趋势线和趋势区FusionCharts中的趋势线是什么趋势线是横跨图标的水平/垂直线条,用来表示一些预订数据值。

在图表中展示趋势线用户可以使用<chart>元素中的trendlines属性来显示图表中的趋势线。

示例：<chart caption='Quarterly Sales Summary' subcaption='Figures inxAxisName='Quarter' yAxisName='Sales' showValues='0'><set label='Qtr 1' value='420500' /><set label='Qtr 2' value='295400' /><set label='Qtr 3' value='523400' /><set label='Qtr 4' value='465400' /><trendLines><line startValue='430000' color='009933' displayvalue='Target' /> </trendLines></chart>趋势线是按照用户指定的值进行绘制。

如果指定的值不是在图表的限制范围中,那么趋势线就完全不会显示出来。

显示图表中趋势线的文本当用户使用toolText属性的时候，趋势线也可以显示文本信息。

用户可以根据下列数据为趋势线指定一个自定义工具文本:<chart caption='Quarterly Sales Summary' subcaption='Figures inxAxisName='Quarter' yAxisName='Sales' showValues='0'><set label='Qtr 1' value='420500' /><set label='Qtr 2' value='295400' /><set label='Qtr 3' value='523400' /><set label='Qtr 4' value='465400' /><trendLines><line startValue='430000' color='009933' displayvalue='Target'toolText='This trend was calculated last year'/></trendLines></chart>什么是FusionCharts的趋势区趋势区域类似于趋势线,只是标出的是一个区域整个区而不是一条线。

Flex基础_2

The labelField is the property of the objects in the dataProvider to display on PieChart. You have to set the labelPosition to inside, outside, callout, or insideWithCallout to specify where the labels should appear; the default value i none. Your code should appear as shown here:
FLXB实例制作实例制作
数据CRUD 报表制作页面美化发布部署测试与调试
FLXB实例制作实例制作
报表ห้องสมุดไป่ตู้作
饼图展示部门预算柱状图展示各项消费
FLXB实例制作实例制作
Step 1: Create a new DepartmentChart state with a pie chart.
Inside the PieChart itemClick handler, set the ColumnChart dataProvider equal to array of objects returned by the function below.
Copy and paste the following createDataProvider() function into your Script bloc It creates an array of objects with properties called field, actual, and est for each of the items in a department's budget and expense data. protected function createDataProvider(item:Object):Array { var dp:Array= [ {field:'salaries',actual:item.actualsalary,est:item.estsalary}, {field:'travel',actual:item.actualtravel,est:item.esttravel}, {field:'supplies',actual:item.actualsupplies,est:item.estsupplies}, {field:'contractors',actual:item.actualcontractors, est:item.estcontractors} ];

echarts 中 linestyle 类型 -回复

echarts 中linestyle 类型-回复ECharts 中Linestyle 类型：一步一步解析【引言】：ECharts 是一款基于JavaScript的开源可视化库，提供了丰富的图表类型和交互功能。

其中，Linestyle（线条样式）类型是ECharts中的一种基础样式，用于定义图表中线条的样式。

本文将详细介绍ECharts中的Linestyle类型，包括其主要属性和用法，并通过实例展示如何使用不同的LineType样式来增强图表的表现力。

【主体】：一、了解LineType类型ECharts中的LineType类型用于定义线条的样式，可以通过设置不同的属性值来改变线条的颜色、粗细和虚实程度。

该类型的主要属性包括color, width和type。

color属性指定了线条的颜色，width属性指定了线条的粗细，type属性指定了线条的类型（实线、虚线等）。

通过使用不同的属性值组合，我们可以创建出多种不同样式的线条。

二、主要属性介绍1. color属性：用于指定线条的颜色。

可以使用各种形式的颜色值来设置，例如十六进制值（#000000）、RGB值（rgb(0,0,0)）或颜色名称（red）。

ECharts还提供了一些预定义的颜色，可以直接使用这些颜色名称，如"default"、"transparent"等。

2. width属性：用于指定线条的粗细。

可以设置一个数字值，表示线条的宽度（单位为像素），例如2表示2像素。

也可以使用百分比值来表示线条相对于图表大小的百分比。

3. type属性：用于指定线条的类型。

可以设置为"solid"表示实线，"dashed"表示虚线，"dotted"表示点线。

ECharts还提供了一些其他线条类型，如"dottedDash"等，可以根据需要选择。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<mx:LineChart id="lineChart" showDataTips="true" dataProvider="{dp}" width="100%"height="100%" seriesFilters="[]">
seriesFilters 值为数组，边线的阴影等
1showDataTips:是否显示提示
2dataProvider:非常关键的属性，指向XML数据源
构建图表的背景,在mx:LineChart内添加如下代码：
1<mx:backgroundElements>
2<mx:GridLines direction="both"
horizontalTickAligned="true"verticalTickAligned="false"
3verticalStroke="{vSolid}"horizontalStroke="{hSolid}"
4verticalFill="{vFill}"horizontalFill="{hFill}"
5verticalAlternateFill="{tFill}"horizontalAlternateFill="{tFill}"
6/>
7</mx:backgroundElements>
8
9
10<mx:Stroke id="vSolid"weight="1"color="#333333"alpha="0.1"/>
11<mx:Stroke id="hSolid"weight="1"color="#ff0000"alpha="0.1"/>
12<mx:SolidColor id="vFill"color="#D6DECE"alpha=".3"/>
13<mx:SolidColor id="hFill"color="#F9E0E0"alpha=".3"/>
14<mx:SolidColor id="tFill"color="#ffffff"alpha=".3"/>
1direction:顾名思义为表格线的方向，一般设置both
2verticalStroke:垂直边线样式，指向id为vSolid的
3horizontalStroke:水平边线样式
4verticalFill:垂直填充样式
5horizontalFill:水平填充样式
6verticalAlternateFill与horizontalAlternateFill:指的是间隔颜色，近似grid斑马线效果
构建X、Y轴，将下面代码插入mx:LineChart
1<mx:verticalAxis>
2<mx:LinearAxis baseAtZero="false"
title="Price"labelFunction="linearAxis_labelFunc"/>
3</mx:verticalAxis>
4<mx:horizontalAxis>
5<mx:CategoryAxis id="ca"categoryField="@day"
title=""labelFunction="categoryAxis_labelFunc"/>
6</mx:horizontalAxis>
7<mx:horizontalAxisRenderers>
8<mx:AxisRenderer axis="{ca}"canDropLabels="true"/>
9</mx:horizontalAxisRenderers>
10
11<mx:CurrencyFormatter id="currFormatter"precision="2"/>
12private var_DropShadowFilter:DropShadowFilter = new DropShadowFilter(2, 45,0x000000,
0.7, 2, 2, 0.65, 3, false, false);
13
14private function linearAxis_labelFunc(item:Object,prevValue:Object, axis:IAxis):String{
15return currFormatter.format(item);
16}
17private function categoryAxis_labelFunc(item:Object,
prevValue:Object,axis:CategoryAxis, categoryItem:Object):String{
18return String(item) + '日';
19}
mx:verticalAxis，设置Y轴线。

先来看下其属性含义
20baseAtZero:Y轴线的起点是否强制从0开始。

21title:Y轴线的标题
22labelFunction:每一格标签的处理函数，categoryAxis_labelFunc函数将格式化数字mx:horizontalAxis，设置X轴线（只是设置，真正的指派运行是其下mx:horizontalAxisRenderers ）。

mx:CategoryAxis将指定Y轴标签所对应得数据源，以及对标签数据的格式化函数，categoryAxis_labelFunc这个函数将数字日期后面都加上字符串“日”。

==================================================================
未完！代更新！。