Question

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

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

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

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

例如，lineSeries中的yField是“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时，我重写updateDisplayList（），它调用GraphicsUtilities.drawPolyLine（）

我扩展了GraphicsUtilities并覆盖了drawPolyLine（）方法，因为这是实际绘制线的地方。

我可以在这里调用lineStyle（）并更改行的alpha ...

我还有一件我无法弄清楚的事情，在drawPolyLine（）方法中如何访问指示alpha应该是什么的数据？

感谢!!!!

Answer 1

我使用的是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>

Answer 2

您是否尝试过使用自定义项呈示器？

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

这只是一个简单的例子，但我认为itemRenderer是最佳选择。

Answer 3

在drawPolyLine功能中，您将获得pts:Array。这是特定SeriesItem的数组。对于Line系列，您将获得一组LineSeriesItem个对象。因此，如果您想获得x＆amp; y轴值。您只需访问xValue的{{1}}或yValue属性即可。像这样：LineSeriesItem或pts[0].xValue

pts[0].yValue

Flex：在LineSeries上创建自定义笔划？

3 个答案: