加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

LineChart实现双Y坐标轴

发布时间:2020-12-15 04:28:06 所属栏目:百科 来源:网络整理
导读:LineChart文件内容: ?xml?version="1.0"?encoding="utf-8"? s:VGroup?gap="0"?xmlns:fx="http://ns.adobe.com/mxml/2009"?xmlns:s="library://ns.adobe.com/flex/spark" ????xmlns:mx="library://ns.adobe.com/flex/mx"?width="400"?height="300" ?fx:Scrip

LineChart文件内容:

<?xml?version="1.0"?encoding="utf-8"?>
<s:VGroup?gap="0"?xmlns:fx="http://ns.adobe.com/mxml/2009"?xmlns:s="library://ns.adobe.com/flex/spark"
????xmlns:mx="library://ns.adobe.com/flex/mx"?width="400"?height="300">
?<fx:Script>
??<![CDATA[
???import?mx.binding.utils.BindingUtils;
???import?mx.collections.ArrayCollection;

???import?spark.components.CheckBox;

???public?static?const?VERTICALAXISLEFT:String?=?'verticalAxisLeft';
???public?static?const?VERTICALAXISRIGHT:String?=?'verticalAxisRight';
???[Bindable]
???/*?数据源?*/
???private?var?_dataProvider:ArrayCollection;
???[Bindable]
???/*?水平轴上的绑定字段?,默认空*/
???private?var?_categoryField:String?=?'';
???[Bindable]
???/*?水平轴上的标题?,默认空*/
???private?var?_title:String?=?'';
???[Bindable]
???/*?是否显示左边的刻度线,默认true?*/
???private?var?_calibrationLeft:Boolean?=?true;
???[Bindable]
???/*?是否显示右边的刻度线,默认false?*/
???private?var?_calibrationRight:Boolean?=?false;
???[Bindable]
???/*?在垂直轴上显示的内容,可多个?,格式?{yField:'字段',displayName:'提示标题',align:}*/
???private?var?_lineSeriesArray:Array;

???public?function?set?dataProvider(value:ArrayCollection):void?{
????_dataProvider?=?value;
???}

???public?function?set?categoryField(value:String):void?{
????_categoryField?=?value;
???}

???public?function?set?title(value:String):void?{
????_title?=?value;
???}

???public?function?set?calibrationRight(value:Boolean):void?{
????_calibrationRight?=?value;
???}

???public?function?set?calibrationLeft(value:Boolean):void?{
????_calibrationLeft?=?value;
???}

???public?function?set?lineSeriesArray(value:Array):void?{
????_lineSeriesArray?=?value;
????if?(_lineSeriesArray)?{
?????var?check:CheckBox;
?????var?target:mx.charts.LineChart?=?mx.charts.LineChart(this.getChildAt(1));
?????colorList.removeAll();
?????while?(_lineSeriesArray.length?>?0)?{
??????var?item:Object?=?_lineSeriesArray.pop();
??????var?series:LineSeries?=?new?LineSeries;
??????series.horizontalAxis?=?h1;
??????series.yField?=?item.yField;
??????series.displayName?=?item.displayName;
??????if?(item.align?==?VERTICALAXISLEFT)?{
???????series.verticalAxis?=?v1;
??????}?else?if?(item.align?==?VERTICALAXISRIGHT)?{
???????series.verticalAxis?=?v2;
??????}
??????var?storkt:SolidColorStroke?=?new?SolidColorStroke();
??????//随机生成颜色colorArr[i]
??????storkt.color?=?bulidColor();
??????storkt.weight?=?1;
??????series.setStyle("lineStroke",?storkt);
??????target.series.push(series);
??????target.series?=?target.series;

??????check?=?new?CheckBox;
??????check.setStyle('color',?storkt.color);
??????check.label?=?item.displayName;
??????check.selected?=?true;
??????tools.addElement(check);

??????BindingUtils.bindProperty(series,?'visible',?check,?'selected');
??????BindingUtils.bindProperty(series,?'includeInLayout',?'selected');
?????}
????}
???}

???private?var?source:Array?=?['1',?'2',?'3',?'4',?'5',?'6',?'7',?'8',?'9',?'0',?'A',?'B',?'C',?'D',?'E',?'F'];

???private?var?colorList:ArrayCollection?=?new?ArrayCollection;

???private?function?bulidColor():uint?{
????var?color:String?=?'0x';
????var?index:Number;
????for?(var?i:int?=?0;?i?<?6;?i++)?{
?????//0-15之间的随机数,不包含15?
?????index?=?Math.round(Math.random()?*?15);
?????color?+=?source[index];
????}
????if?(colorList.contains(color))?{
?????bulidColor();
????}?else?{
?????colorList.addItem(color);
????}
????return?mx.core.Singleton.getInstance("mx.styles::IStyleManager2").getColorName(color);
???}
??]]>
?</fx:Script>
?<s:HGroup?id="tools"?gap="15"?width="100%"?horizontalAlign="center"?verticalAlign="middle"?height="30"/>
?<mx:LineChart??id="__lineChart"?seriesFilters="[]"?dataProvider="{_dataProvider}"?showDataTips="true"?width="100%"?height="100%">
??<!--backgroundElements:背景设置-->
??<mx:backgroundElements>
???<mx:GridLines?horizontalTickAligned="false"?verticalTickAligned="false">
????<mx:verticalStroke>
?????<mx:SolidColorStroke?id="ss"?color="#a6cecd"?weight="1"?alpha="0.4"/>
????</mx:verticalStroke>
????<mx:horizontalStroke>
?????<mx:SolidColorStroke?color="#a6cecd"?weight="1"?alpha="0.6"/>
????</mx:horizontalStroke>
???</mx:GridLines>
??</mx:backgroundElements>

??<!--categoryField:横坐标数据节点-->
??<mx:horizontalAxis>
???<mx:CategoryAxis?id="h1"?categoryField="{_categoryField}"?title="{_title}"/>
??</mx:horizontalAxis>
??<mx:horizontalAxisRenderers>
???<mx:AxisRenderer?placement="bottom"?axis="{h1}"/>
??</mx:horizontalAxisRenderers>

??<!--纵坐标-->
??<mx:verticalAxisRenderers>
???<mx:AxisRenderer?axisStroke="{ss}"?placement="left"?axis="{v1}"?visible="{_calibrationLeft}"
????????includeInLayout="{_calibrationLeft}"/>
???<mx:AxisRenderer?axisStroke="{ss}"?placement="right"?axis="{v2}"?visible="{_calibrationRight}"
????????includeInLayout="{_calibrationRight}"/>
??</mx:verticalAxisRenderers>

??<mx:series>
???<!--纵坐标轴1-->
???<mx:LineSeries?id="w__sasfw"?horizontalAxis="{h1}"?visible="false"?includeInLayout="false">
????<mx:verticalAxis>
?????<mx:LinearAxis?id="v1"?title=""/>
????</mx:verticalAxis>
???</mx:LineSeries>
???<!--纵坐标轴2-->
???<mx:LineSeries?horizontalAxis="{h1}"?visible="false"?includeInLayout="false">
????<mx:verticalAxis>
?????<mx:LinearAxis?id="v2"?title=""/>
????</mx:verticalAxis>
???</mx:LineSeries>
??</mx:series>
?</mx:LineChart>
</s:VGroup>

?

测试文件内容:

<?xml?version="1.0"?encoding="utf-8"?>
<s:Application?xmlns:fx="http://ns.adobe.com/mxml/2009"?xmlns:s="library://ns.adobe.com/flex/spark"
??????xmlns:mx="library://ns.adobe.com/flex/mx"?minWidth="955"?minHeight="600"?xmlns:charts="com.charts.*">
?<s:layout>
??<s:VerticalLayout/>
?</s:layout>
?<fx:Script>
??<![CDATA[
???import?mx.collections.ArrayCollection;
???import?mx.events.FlexEvent;

???[Bindable]
???private?var?expensesAC:ArrayCollection?=?new?ArrayCollection([{Month:?"Jan",?Profit:?2000,?Expenses:?1500,?Amount:?450},?{Month:?"Feb",?Profit:?1000,?Expenses:?200,?Amount:?600},?{Month:?"Mar",?Profit:?1500,?Expenses:?500,?Amount:?300},?{Month:?"Apr",?Profit:?1800,?Expenses:?1200,?Amount:?900},?{Month:?"May",?Profit:?2400,?Expenses:?575,?Amount:?500}]);

???override?protected?function?createChildren():void?{ ????addEventListener(FlexEvent.APPLICATION_COMPLETE,?function(e:FlexEvent):void?{ ?????var?source:Array?=?[{yField:?'Profit',?displayName:?'利润',?align:?LineChart.VERTICALAXISLEFT},?{yField:?'Expenses',?displayName:?'开支',?{yField:?'Amount',?displayName:?'金额',?align:?LineChart.VERTICALAXISRIGHT}]; ?????chart.lineSeriesArray?=?source; ????}); ????super.createChildren(); ???} ??]]> ?</fx:Script> ?<!--?Define?custom?colors?for?use?as?fills?in?the?AreaChart?control.?--> ?<charts:LineChart?id="chart"?width="100%"?height="100%"?calibrationRight="true"?dataProvider="{expensesAC}"?categoryField="Month" ???????title="这是测试,可以改啊"/> </s:Application>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读