1

您可以像这样轻松地在线条系列上设置笔划：

<mx:LineSeries yField="apple">
    <mx:lineStroke>
        <mx:Stroke 
                    color="0x6699FF" 
                    weight="4" 
                    alpha=".8"
        />
    </mx:lineStroke>
</mx:LineSeries>

这会将整个笔划的 alpha 设置为 0.8

但我希望能够根据 dataProvider 中的某些内容为每个绘图设置不同的 alpha。

例如yField，lineSeries 中的“Apple”是它知道在哪里绘制 lineSeries 的方式。我希望能够添加类似alphaField的内容，告诉它为每个图设置笔画 alpha 的内容。

所以如果我的 dataProvider 是：

<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% alpha 笔画。

我怎样才能做到这一点？？？我正在查看 LineSeries 的 commitProperties() 和 updateDisplayList() 方法，但不知道需要添加/更改什么才能做到这一点？

我很确定，这个类必须使用 Graphics.lineTo() 来绘制每个图，所以基本上它需要以某种方式“获取”当前的 alphaField 值，并在绘制每个之前应用具有正确 alpha 的 Graphics.lineStyle()线。

谢谢！！

更新

我离我的答案更近了。

当我扩展 LineRenderer 时，我覆盖了调用 GraphicsUtilities.drawPolyLine() 的 updateDisplayList()

我扩展了 GraphicsUtilities 并覆盖了 drawPolyLine() 方法，因为这是实际绘制线的位置。

我可以在这里调用 lineStyle() 并更改该行的 alpha ...

我仍然有一件我无法弄清楚的事情，从 drawPolyLine() 方法中我如何访问那些指示 alpha 应该是什么的数据？

谢谢！！！！

4

3 回答 3

0

我使用了 Flex SDK 4.0，但我相信它也适用于 3.4。

使用 ArrayCollection 而不是 XML，因为它不是 tsimus。

<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>
于 2010-01-19T15:33:59.810 回答
0

您是否尝试过使用自定义项目渲染器？

<mx:LineSeries>
  <mx:itemRenderer>
    <mx:Component>
      <mx:BoxItemRenderer scaleX="1" scaleY="1" alpha="{data.alpha}"/>
    </mx:Component>
  </mx:itemRenderer>
</mx:LineSeries>

这只是一个简单的例子，但我认为 itemRenderer 是要走的路。

于 2010-01-19T15:36:01.413 回答
0

在drawPolyLine函数中你会得到pts:Array. 这是特定 SeriesItem 的数组。对于 Line 系列，您将获得一组LineSeriesItem对象。所以如果你想得到你的 x&y 轴值。您只需访问 a 的xValueoryValue属性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
于 2010-01-21T09:58:33.253 回答