Гибкий:Создать собственный штрих в LineSeries?
-
20-09-2019 - |
Вопрос
Вы можете легко установить обводку для серии линий следующим образом:
<mx:LineSeries yField="apple">
<mx:lineStroke>
<mx:Stroke
color="0x6699FF"
weight="4"
alpha=".8"
/>
</mx:lineStroke>
</mx:LineSeries>
Это установит альфу для всего штриха на 0,8.
Но я хочу иметь возможность устанавливать разные альфа-каналы для каждого графика на основе чего-то в dataProvider.
Например, yField
в lineSeries указано «Apple», поэтому оно знает, где строить график для lineSeries.Я хочу иметь возможность добавить что-то вроде 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, а затем 50% альфа-штрих от графика 1 к графику 2.
Как я могу это сделать???Я просматриваю методы commitProperties() и updateDisplayList() LineSeries и понятия не имею, что нужно добавить/изменить, чтобы это сделать?
Я почти уверен, что этот класс должен использовать Graphics.lineTo() для рисования каждого графика, поэтому в основном ему нужно будет каким-то образом «получить» текущее значение AlphaField и применить Graphics.lineStyle() с правильной альфа-каналом перед рисованием каждого линия.
Спасибо!!
ОБНОВЛЯТЬ
Я стал намного ближе к своему ответу.
Когда я расширяю LineRenderer, я переопределяю updateDisplayList(), который вызывает GraphicsUtilities.drawPolyLine().
Я расширяю GraphicsUtilities и переопределяю метод drawPolyLine(), поскольку именно здесь фактически рисуется линия.
Я могу вызвать здесь lineStyle() и изменить альфу линии...
У меня все еще есть одна вещь, которую я не могу понять: как я могу получить доступ к этим данным из метода drawPolyLine(), которые определяют, какой должна быть альфа?
Спасибо!!!!
Решение
Я использовал Flex SDK 4.0, но думаю, что он будет работать и в версии 3.4.
Использовал ArrayCollection вместо XML, потому что это был не цимус.
<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
.Это массив конкретного SeriesItem.Для серии Line вы получите массив LineSeriesItem
объекты.Итак, если вы хотите получить значения осей x&y.вы просто получаете доступ к xValue
или yValue
собственность 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