Flex4 - 线图(LineChart)实现双纵坐标轴
作者:hangge | 2015-08-25 12:27
下面是一个让图表使用双纵坐标轴的样例,图上的两根折线分别对应左右两侧的竖轴。


<?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">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var arr:ArrayCollection=new ArrayCollection([
{xname:'18:00',yname:2000,y2name:800},
{xname:'19:00',yname:1000,y2name:500},
{xname:'20:00',yname:3000,y2name:700},
{xname:'21:00',yname:4000,y2name:800},
{xname:'22:00',yname:1300,y2name:600}]);
]]>
</fx:Script>
<fx:Declarations>
<!-- 轴线样式 (暂时不需要,改成背景上绘制)-->
<mx:SolidColorStroke id = "axisS1" color="0xE3E3E3" weight="1" alpha="0"/>
</fx:Declarations>
<mx:LineChart id="myChart" seriesFilters="[]" fontSize="12"
height="60%" width="60%" verticalCenter="0" horizontalCenter="0"
dataProvider="{arr}"
showDataTips="true">
<!--backgroundElements:背景设置-->
<mx:backgroundElements>
<s:Group width="100%" height="100%" id="chartBg">
<s:Rect left="0" right="1" top="0" bottom="0">
<s:fill>
<s:SolidColor alpha="1" color="#F5F5F5"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0xE3E3E3" weight="1"/>
</s:stroke>
</s:Rect>
</s:Group>
<mx:GridLines gridDirection="both" >
<mx:horizontalStroke>
<mx:SolidColorStroke color="0xE3E3E3" weight="1"/>
</mx:horizontalStroke>
<mx:verticalStroke>
<mx:SolidColorStroke color="0xEAEAEA" weight="1"/>
</mx:verticalStroke>
</mx:GridLines>
</mx:backgroundElements>
<!--categoryField:横坐标数据节点-->
<mx:horizontalAxis>
<mx:CategoryAxis id="h1"
categoryField="xname"
title="时间"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer placement="bottom" axis="{h1}" axisStroke="{axisS1}"
tickPlacement="none" minorTickPlacement="none"/>
</mx:horizontalAxisRenderers>
<!--纵坐标-->
<mx:verticalAxisRenderers>
<mx:AxisRenderer placement="left" axis="{v1}" axisStroke="{axisS1}"
tickPlacement="none" minorTickPlacement="none"/>
<mx:AxisRenderer placement="right" axis="{v2}" axisStroke="{axisS1}"
tickPlacement="none" minorTickPlacement="none"/>
</mx:verticalAxisRenderers>
<!--yField:纵坐标数据节点-->
<mx:series>
<!--纵坐标轴1数据节点-->
<mx:LineSeries id="cs1" horizontalAxis="{h1}" yField="yname" displayName="电压(V)">
<mx:verticalAxis>
<mx:LinearAxis id="v1" title="电压(V)"/>
</mx:verticalAxis>
</mx:LineSeries>
<!--纵坐标轴2数据节点-->
<mx:LineSeries id="cs2" horizontalAxis="{h1}" yField="y2name" displayName="电流(A)">
<mx:verticalAxis>
<mx:LinearAxis id="v2" title="电流(A)"/>
</mx:verticalAxis>
</mx:LineSeries>
</mx:series>
</mx:LineChart>
</s:Application>
全部评论(0)