flex chart学习笔记

帮助你学习Flex Chart

Flex中如何创建clustered, stacked, overlaid以及100% Bar charts <?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" viewSourceURL="srcview/index.html">

<mx:ApplicationControlBar dock="true"> <mx:Form>

<mx:FormItem label="type:"> <mx:ComboBox id="comboBox"> <mx:dataProvider>

<mx:Object label="clustered" /> <mx:Object label="stacked" /> <mx:Object label="100%" />

帮助你学习Flex Chart

<mx:Object label="overlaid" /> </mx:dataProvider> </mx:ComboBox> </mx:FormItem>

<mx:FormItem label="showDataTips:"> <mx:CheckBox id="checkBox1" /> </mx:FormItem>

<mx:FormItem label="showAllDataTips:"> <mx:CheckBox id="checkBox2" /> </mx:FormItem> </mx:Form>

<mx:Spacer width="100%" />

<mx:Legend dataProvider="{barChart}"/>

帮助你学习Flex Chart

</mx:ApplicationControlBar>

<mx:BarChart id="barChart"

type="{bel}" showDataTips="{checkBox1.selected}" showAllDataTips="{checkBox2.selected}" height="100%" width="100%">

<mx:dataProvider> <mx:Array>

<mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />

<mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />

帮助你学习Flex Chart

<mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />

<mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />

<mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" /> </mx:Array> </mx:dataProvider> <mx:verticalAxis>

<mx:CategoryAxis categoryField="name"/> </mx:verticalAxis> <mx:series>

<mx:BarSeries yField="name" xField="obp" displayName="OBP"/>

<mx:BarSeries yField="name" xField="slg" displayName="SLG"/>

帮助你学习Flex Chart

<mx:BarSeries yField="name" xField="avg" displayName="AVG"/> </mx:series> </mx:BarChart> </mx:Application>

Flex中如何利用canDropLabels样式，移除图表中一些水平轴线上标签

<?xml version="1.0"?>

<mx:Application xmlns:mx="/2006/mxml" layout="vertical" verticalAlign="middle"

backgroundColor="white" viewSourceURL="srcview/index.html">

<mx:XML id="quotesXML" source="adbe.xml" format="e4x" /> <mx:XMLListCollection id="adbe" source="{quotesXML.quote}" />

<mx:String id="ADBE_YAHOO">/q?d=t&amp;s=ADBE</mx:String>

<mx:ApplicationControlBar dock="true"> <mx:CheckBox id="checkBox" label="canDropLabels:" labelPlacement="left" /> </mx:ApplicationControlBar>

<mx:LinkButton label="ADBE"

click="navigateToURL(new URLRequest(ADBE_YAHOO))" fontSize="14" fontWeight="bold" />

帮助你学习Flex Chart

<mx:HLOCChart id="hlocChart" showDataTips="true" dataProvider="{adbe}" width="100%" height="100%">

<!-- vertical axis --> <mx:verticalAxis>

<mx:LinearAxis baseAtZero="false" title="Price" /> </mx:verticalAxis>

<!-- horizontal axis --> <mx:horizontalAxis>

<mx:CategoryAxis categoryField="@date" title="Date" /> </mx:horizontalAxis>

<!-- horizontal axis renderer --> <mx:horizontalAxisRenderer>

<mx:AxisRenderer canDropLabels="{checkBox.selected}" /> </mx:horizontalAxisRenderer>

<!-- series --> <mx:series>

<mx:HLOCSeries id="series1" highField="@high" lowField="@low" openField="@open" closeField="@close"/> </mx:series> </mx:HLOCChart>

</mx:Application>

Flex中如何通过showAllDataTips属性，使鼠标移动到图表时显示所有的数据Tips

帮助你学习Flex Chart

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="/2006/mxml" layout="vertical" verticalAlign="middle"

backgroundColor="white" viewSourceURL="srcview/index.html">

<mx:Script> <![CDATA[

import mx.charts.series.items.PieSeriesItem; import mx.charts.HitData;

private function pieChart_rollOver(evt:MouseEvent):void { PieChart(evt.currentTarget).showAllDataTips = true; }

private function pieChart_rollOut(evt:MouseEvent):void { PieChart(evt.currentTarget).showAllDataTips = false; }

private function pieChart_dataTipFunction(item:HitData):String { var pSI:PieSeriesItem = item.chartItem as PieSeriesItem; return "<b>" + pSI.item.@label + "</b><br />" + pSI.item.@data + " (<i>" +

pSI.percentValue.toFixed(2) + "%</i>)"; } ]]> </mx:Script>

<mx:XML id="dp"> <products>

<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" /> </products> </mx:XML>

帮助你学习Flex Chart

<mx:PieChart id="pieChart"

dataProvider="{dp.product}"

dataTipFunction="pieChart_dataTipFunction" height="250" width="250"

rollOver="pieChart_rollOver(event);" rollOut="pieChart_rollOut(event);"> <mx:series>

<mx:PieSeries id="pieSeries" field="@data" /> </mx:series> </mx:PieChart>

</mx:Application>

Flex中如何在PieChart的数据发生变化时弹出显示

<?xml version="1.0"?>

<mx:Application xmlns:mx="/2006/mxml" layout="horizontal" verticalAlign="middle"

backgroundColor="white" viewSourceURL="srcview/index.html">

<mx:Script> <![CDATA[

import mx.events.ListEvent; import mx.events.SliderEvent;

private function slider_change(evt:SliderEvent):void { var arr:Array = []; if (evt.value >= 0) { arr[evt.value] = 0.2; }

series.perWedgeExplodeRadius = arr; }

private function list_itemRollOver(evt:ListEvent):void {

帮助你学习Flex Chart

var arr:Array = []; arr[evt.rowIndex] = 0.2;

series.perWedgeExplodeRadius = arr; /* Update the slider. */ slider.value = evt.rowIndex; }

private function comboBox_change(evt:ListEvent):void { var field:String = bel; series.field = field; }

private function series_labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {

return + ":\n" + field + ":" + Number(item[field]).toFixed(3); } ]]> </mx:Script>

<mx:ArrayCollection id="arrColl"> <mx:source> <mx:Array>

<mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" /> <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" /> <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" /> <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" /> <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" /> </mx:Array> </mx:source> </mx:ArrayCollection>

<mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain">

<mx:FormItem label="explode wedge:"> <mx:HSlider id="slider" minimum="-1"

maximum="{arrColl.length - 1}" snapInterval="1" liveDragging="true"

帮助你学习Flex Chart

dataTipPrecision="0"

change="slider_change(event);" /> </mx:FormItem>

<mx:FormItem label="field"> <mx:ComboBox id="comboBox"

change="comboBox_change(event);"> <mx:dataProvider> <mx:Array>

<mx:Object label="avg" /> <mx:Object label="obp" /> <mx:Object label="slg" /> </mx:Array> </mx:dataProvider> </mx:ComboBox> </mx:FormItem> </mx:Form>

</mx:ApplicationControlBar>

<mx:List id="list"

dataProvider="{arrColl}" labelField="name" width="100" height="100%"

itemRollOver="list_itemRollOver(event);" />

<mx:PieChart id="chart" height="100%" width="100%" showDataTips="true" dataProvider="{arrColl}"> <mx:series>

<mx:PieSeries id="series" nameField="name" field="avg"

labelPosition="callout"

labelFunction="series_labelFunc" filters="[]" /> </mx:series> </mx:PieChart>

帮助你学习Flex Chart

</mx:Application>

如何在PieChart图表中填充自己的颜色

<?xml version="1.0"?>

<mx:Application xmlns:mx="/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

<mx:Script> <![CDATA[

import mx.charts.series.items.PieSeriesItem; import mx.graphics.IFill; import mx.charts.ChartItem; import mx.graphics.SolidColor;

private function pieSeries_fillFunc(item:ChartItem, index:Number):IFill { var curItem:PieSeriesItem = PieSeriesItem(item); /* Convert to a number between 0 and 1. */ var pct:Number = curItem.percentValue / 100; return new SolidColor(0x0000FF * pct, 1.0); } ]]> </mx:Script>

<mx:XML id="dp"> <products>

<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" /> </products> </mx:XML>

帮助你学习Flex Chart

<mx:PieChart id="chart" height="100%" width="100%" showDataTips="true" dataProvider="{dp.product}"> <mx:series>

<mx:PieSeries id="series" nameField="@label" field="@data"

fillFunction="pieSeries_fillFunc" filters="[]" /> </mx:series> </mx:PieChart>

</mx:Application>

Flex中如何让被PieChart图表的某一部分随着点击旋转

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="/2006/mxml" layout="vertical" verticalAlign="middle"

backgroundColor="white" viewSourceURL="srcview/index.html">

<mx:Script> <![CDATA[

import mx.charts.series.items.PieSeriesItem; import mx.charts.events.ChartItemEvent;

private function pieChart_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;

帮助你学习Flex Chart

pieSeries.startAngle -= degrees; }

private function radiansToDegrees(radians:Number):Number { return radians * (180 / Math.PI); } ]]> </mx:Script>

<mx:XML id="dp"> <products>

<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" /> </products> </mx:XML>

<mx:ApplicationControlBar dock="true"> <mx:CheckBox id="checkBox"

label="Use perWedgeExplodeRadius:" labelPlacement="left" selected="true" /> </mx:ApplicationControlBar>

<mx:PieChart id="pieChart"

dataProvider="{dp.product}"

itemClick="pieChart_itemClick(event);" height="100%" width="100%"> <mx:series>

<mx:PieSeries id="pieSeries" field="@data" labelPosition="callout"> <mx:stroke>

<mx:Stroke color="black" weight="0" /> </mx:stroke>

帮助你学习Flex Chart

<mx:filters> <mx:Array /> </mx:filters> </mx:PieSeries> </mx:series> </mx:PieChart>

</mx:Application>

Flex中如何利用baseAtZero属性，控制曲线图（LineChart）最大或最小值归零

<?xml version="1.0"?>

<mx:Application xmlns:mx="/2006/mxml" layout="vertical" verticalAlign="middle"

backgroundColor="white" viewSourceURL="srcview/index.html">

<mx:XMLListCollection id="dp"> <mx:source> <mx:XMLList> <quote close="40.81" />

<quote close="40.41" />

<quote close="40.6" />

<quote date="8/22/2007" open="40.4" high="41" low="40.2" close="40.77" />

<quote close="40.13" />

<quote close="40.74" />

<quote close="40.32" />

<quote close="39.96" />

<quote

date="8/15/2007"

open="40.22"

high="41.25"

low="40.12"

date="8/16/2007"

open="39.83"

high="40.56"

low="39.28"

date="8/17/2007"

open="40.18"

high="40.48"

low="39.32"

date="8/20/2007"

open="40.55"

high="40.85"

low="39.94"

date="8/21/2007"

open="40.41"

high="40.95"

low="39.87"

date="8/23/2007"

open="40.82"

high="40.99"

low="40.33"

date="8/24/2007"

open="40.5"

high="40.65"

low="39.8"

date="8/27/2007"

open="40.38"

high="41.11"

low="40.25"

帮助你学习Flex Chart

close="40.18" />

<quote close="40.41" />

<quote close="40.83" />

<quote date="8/10/2007"

open="41.3"

high="41.62"

low="40.1"

date="8/13/2007"

open="41"

high="41.13"

low="40.26"

date="8/14/2007"

open="41.01"

high="41.05"

low="40.18"

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" />

</mx:XMLList> </mx:source> </mx:XMLListCollection>

<mx:ApplicationControlBar dock="true"> <mx:CheckBox id="checkBox" label="baseAtZero:" labelPlacement="left" selected="false" />

<mx:Spacer width="100%" />

<mx:Legend dataProvider="{lineChart}" /> </mx:ApplicationControlBar>

<mx:LineChart id="lineChart" showDataTips="true" dataProvider="{dp}"

high="41.74"

high="40.67"

high="39.91"

high="39.77"

high="39.66"

high="39.8"

high="40.49"

low="39.86"

low="39.5"

low="38.61"

low="38.54"

low="38.7"

low="39.05"

low="38.57"

帮助你学习Flex Chart

width="100%" height="100%">

<!-- series filters --> <mx:seriesFilters> <mx:Array /> </mx:seriesFilters>

<!-- vertical axis --> <mx:verticalAxis>

<mx:LinearAxis baseAtZero="{checkBox.selected}" title="Price" /> </mx:verticalAxis>

<!-- horizontal axis --> <mx:horizontalAxis>

<mx:CategoryAxis id="ca" categoryField="@date" title="Date" /> </mx:horizontalAxis>

<!-- horizontal axis renderer --> <mx:horizontalAxisRenderers>

<mx:AxisRenderer axis="{ca}" canDropLabels="true" /> </mx:horizontalAxisRenderers>

<!-- series --> <mx:series>

<mx:LineSeries yField="@close" form="curve" displayName="Close" /> <mx:LineSeries yField="@open" form="curve" displayName="Open" /> </mx:series>

</mx:LineChart>

</mx:Application>

Flex中Flex中如何在LineChart图表中，创建一个自定义的LinearAxis函数标签

帮助你学习Flex Chart

<?xml version="1.0"?>

<mx:Application xmlns:mx="/2006/mxml" layout="vertical" verticalAlign="middle"

backgroundColor="white" viewSourceURL="srcview/index.html">

<mx:Script> <![CDATA[

import mx.charts.chartClasses.IAxis;

private axis:IAxis):String {

return currFormatter.format(item); } ]]> </mx:Script>

<mx:CurrencyFormatter id="currFormatter" precision="2" />

<mx:XMLListCollection id="dp"> <mx:source> <mx: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" />

function

linearAxis_labelFunc(item:Object,

prevValue:Object,

帮助你学习Flex Chart

<quote date="8/24/2007" open="40.5" close="40.41" /> <quote date="8/27/2007" open="40.38" close="40.81" /> </mx:XMLList> </mx:source> </mx:XMLListCollection>

<mx:LineChart id="lineChart" showDataTips="true" dataProvider="{dp}" width="100%" height="100%">

<!-- vertical axis --> <mx:verticalAxis>

<mx:LinearAxis baseAtZero="false" title="Price"

labelFunction="linearAxis_labelFunc" /> </mx:verticalAxis>

<!-- horizontal axis --> <mx:horizontalAxis>

<mx:CategoryAxis id="ca" categoryField="@date" title="Date" /> </mx:horizontalAxis>

<!-- horizontal axis renderer --> <mx:horizontalAxisRenderers> <mx:AxisRenderer axis="{ca}" canDropLabels="true" /> </mx:horizontalAxisRenderers>

<!-- series --> <mx:series>

<mx:LineSeries yField="@open" form="curve"

displayName="Open" /> </mx:series>

帮助你学习Flex Chart

<!-- series filters --> <mx:seriesFilters> <mx:Array /> </mx:seriesFilters> </mx:LineChart>

</mx:Application>

Flex中如何通过lineStroke样式，改变LineChart图表线条颜色

<?xml version="1.0"?>

<mx:Application xmlns:mx="/2006/mxml" layout="vertical" verticalAlign="middle"

backgroundColor="white" viewSourceURL="srcview/index.html">

<mx:Script> <![CDATA[

import mx.styles.StyleManager; ]]> </mx:Script>

<mx:XMLListCollection id="dp"> <mx:source> <mx: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" />

帮助你学习Flex Chart

<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" /> </mx:XMLList> </mx:source> </mx:XMLListCollection>

<mx:ApplicationControlBar dock="true">

<mx:Button label="0xFF0000" click="closeSeries.setStyle(&apos;lineStroke&apos;, new Stroke(0xFF0000, 2, 0.4));" />

<mx:Button label="0xFF00FF" click="closeSeries.setStyle(&apos;lineStroke&apos;, new Stroke(0xFF00FF, 2, 1.0));" />

<mx:Button label="haloSilver" click="closeSeries.setStyle(&apos;lineStroke&apos;, new Stroke(StyleManager.getColorName(&apos;haloSilver&apos;), 2, 1.0));" />

<mx:Spacer width="100%" />

<mx:Legend dataProvider="{lineChart}" /> </mx:ApplicationControlBar>

<mx:LineChart id="lineChart" showDataTips="true" dataProvider="{dp}" width="100%" height="100%">

<!-- series filters --> <mx:seriesFilters> <mx:Array /> </mx:seriesFilters>

<!-- vertical axis --> <mx:verticalAxis>

<mx:LinearAxis baseAtZero="false" title="Price" /> </mx:verticalAxis>

帮助你学习Flex Chart

<!-- horizontal axis --> <mx:horizontalAxis>

<mx:CategoryAxis id="ca" categoryField="@date" title="Date" /> </mx:horizontalAxis>

<!-- horizontal axis renderer --> <mx:horizontalAxisRenderers>

<mx:AxisRenderer axis="{ca}" canDropLabels="true" /> </mx:horizontalAxisRenderers>

<!-- series --> <mx:series> <mx:LineSeries displayName="Close">

<mx:lineStroke>

<mx:Stroke color="haloGreen" weight="2" alpha="0.6" /> </mx:lineStroke> </mx:LineSeries>

<mx:LineSeries yField="@open" form="curve" displayName="Open"> <mx:lineStroke>

<mx:Stroke color="haloOrange" weight="2" alpha="0.6" /> </mx:lineStroke> </mx:LineSeries> </mx:series> </mx:LineChart>

</mx:Application>

id="closeSeries"

yField="@close"

form="curve"

Flex中如何利用seriesFilters属性，添加/删除LineChart图表曲线阴影

<?xml version="1.0"?>

<mx:Application xmlns:mx="/2006/mxml" layout="vertical" verticalAlign="middle"

backgroundColor="white" viewSourceURL="srcview/index.html">

本文来源：https://www.bwwdw.com/article/idv1.html