Flex : 라인 세리에 맞춤 스트로크를 만드시겠습니까?
-
20-09-2019 - |
문제
다음과 같은 라인 시리즈에서 스트로크를 쉽게 설정할 수 있습니다.
<mx:LineSeries yField="apple">
<mx:lineStroke>
<mx:Stroke
color="0x6699FF"
weight="4"
alpha=".8"
/>
</mx:lineStroke>
</mx:LineSeries>
이것은 전체 스트로크의 알파를 .8로 설정합니다.
그러나 나는 Dataprovider의 무언가를 기반으로 각 플롯에 대해 스토크에 다른 알파를 설정할 수 있기를 원합니다.
예를 들어 yField
라인 셔리에는 "사과"가 있는데, 이는 라인 셔리를 위해 어디에 있는지 아는 방법입니다. 나는 같은 것을 추가 할 수 있기를 원합니다 alphaField
각 플롯에 대해 스트로크 알파를 설정 해야하는 내용을 알려줍니다.
따라서 내 데이터 프로비더라면 :
<result month="Jan-04">
<apple>81768</apple>
<alpha>1</alpha>
</result>
<result month="Feb-04">
<apple>51156</apple>
<alpha>1</alpha>
</result>
<result month="Mar-04">
<apple>51156</apple>
<alpha>.5</alpha>
</result>
그리고 나는 설정했다 alphaField="alpha"
그런 다음 플롯 0에서 플롯 1으로의 단단한 스트로크를 갖고 플롯 1에서 플롯 2로 50% 알파 스트로크를 갖습니다.
어떻게 할 수 있습니까 ??? 나는 CommitProperties () 및 updateSplayList () 라인 세리의 메소드를 찾고 있으며 이것을 만들기 위해 무엇을 추가/변경 해야하는지 전혀 모른다?
이 클래스는 그래픽을 사용하여 각 플롯을 그려야하므로 각 플롯을 그려야하므로 기본적으로 현재 알파 필드 값을 "가져 와서"각각을 그리기 전에 올바른 알파와 함께 그래픽을 "가져와야합니다. 선.
감사!!
업데이트
나는 내 대답에 훨씬 더 가까워졌다.
Linerenderer를 확장하면 GraphicsUtilities.DrawPolyline ()을 호출하는 updateSplayList ()를 재정의합니다.
그래픽 서신을 확장하고 메소드 DrawPolyline ()을 재정의하여 라인이 실제로 그려지는 곳입니다.
나는 여기에서 linestyle ()을 호출하고 줄의 알파를 바꿀 수 있습니다 ...
DrawPolyline () 메소드 내에서 알파가 무엇인지 지시하는 데이터에 어떻게 액세스 할 수 있습니까?
감사!!!!
해결책
Flex SDK 4.0을 사용했지만 3.4에서도 작동한다고 생각합니다.
Tsimus가 아니기 때문에 XML 대신 ArrayCollection을 사용했습니다.
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo" >
<fx:Script><![CDATA[
import mx.charts.ChartItem;
import mx.charts.renderers.CircleItemRenderer;
import mx.collections.ArrayCollection;
import mx.graphics.IFill;
import mx.graphics.SolidColor;
import mx.graphics.Stroke;
import st.model.ViewModelLocator;
[Bindable]
private var modelLocator:st.model.ViewModelLocator = ViewModelLocator.getInstance() ;
[Bindable]
public var dp :ArrayCollection = new ArrayCollection([
{ test:0.1,alpha: 1 },
{ test:0.2,alpha: 0.5 },
{ test:0.3,alpha: 0.75 },
{ test:0.4,alpha: 0.25 },
{ test:0.5,alpha: 0.5 }
]);
private function myFillFunction(element:ChartItem, index:Number):IFill {
return new SolidColor(0x6699FF,Number(element.item.alpha));
}
]]></fx:Script>
<mx:ColumnChart id="myChart" dataProvider="{dp}">
<mx:series>
<mx:LineSeries lineStroke="{new Stroke(0x6699FF,4,0.1)}" width="100" height="100" yField="test" fillFunction="{myFillFunction}" itemRenderer="{new ClassFactory(mx.charts.renderers.CircleItemRenderer)}" />
</mx:series>
</mx:ColumnChart>
</mx:Application>
다른 팁
사용자 정의 항목 렌더러를 사용해 보셨습니까?
<mx:LineSeries>
<mx:itemRenderer>
<mx:Component>
<mx:BoxItemRenderer scaleX="1" scaleY="1" alpha="{data.alpha}"/>
</mx:Component>
</mx:itemRenderer>
</mx:LineSeries>
이것은 단지 빠른 예일 뿐이지 만 Itemrenderer가 갈 길이라고 생각합니다.
~ 안에 drawPolyLine
당신이 얻을 수있는 기능 pts:Array
. 이것은 특정 시리즈의 배열입니다. 라인 시리즈의 경우 배열이 있습니다 LineSeriesItem
사물. 따라서 X & Y 축 값을 얻으려면. 당신은 그냥 액세스합니다 xValue
또는 yValue
a의 속성 LineSeriesItem
. 이와 같이: pts[0].xValue
또는 pts[0].yValue
public static function drawPolyLine(g:Graphics, pts:Array,
start:int, end:int,
hProp:String, vProp:String,
stroke:IStroke, form:Object,
moveToStart:Boolean = true):void