弹性柱形图自定义

Posted 2023-02-16

【中文标题】弹性柱形图自定义

【英文标题】：Flex Column Chart customization

【发布时间】：2011-02-04 16:01:00

【问题描述】：

当我通过覆盖 updateDisplayList 函数自定义 Flex 中的 ColumnChart 时，图例中的颜色不再显示。如下图所示：

http://i41.tinypic.com/mim35d.png

我错过了什么吗？

谢谢。

【参考方案1】：

如果您想查看源代码，这就是我所做的。

覆盖受保护的函数 updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void super.updateDisplayList(unscaledWidth, unscaledHeight);

        var fill:IFill;
        var state:String = "";

        if (_data is ChartItem && _data.hasOwnProperty('fill'))
        
            state = _data.currentState;
            fill = _data.fill;
               
        else
            fill = GraphicsUtilities.fillFromStyle(getStyle('fill'));

        var color:uint;
        var adjustedRadius:Number = 0;

        color = ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),-20);
        fill = new SolidColor(color);       
        adjustedRadius = getStyle('adjustedRadius');
        if (!adjustedRadius)
            adjustedRadius = 0;


        var stroke:IStroke = getStyle("stroke");

        var w:Number = stroke ? stroke.weight / 2 : 0;

        var rc:Rectangle = new Rectangle(w - adjustedRadius, w - adjustedRadius, width - 2 * w + adjustedRadius * 2, height - 2 * w + adjustedRadius * 2);

        var g:Graphics = graphics;
        g.clear();      
        g.moveTo(rc.left,rc.top);
        if (stroke)
            stroke.apply(g);
        if (fill)
            fill.begin(g,rc);
        g.lineTo(rc.right-5,rc.top);
        g.lineTo(rc.right-5,rc.bottom);
        g.lineTo(rc.left+5,rc.bottom);
        g.lineTo(rc.left+5,rc.top);
        if (fill)
            fill.end(g);

【参考方案2】：

您可以使用 legendMarkerRenderer 格式化图例标记。本文向您展示了如何走向底部： http://livedocs.adobe.com/flex/3/html/help.html?content=charts_formatting_13.html

您还可以通过创建自己的 LegendItem 来自定义您的 LegendItem： http://livedocs.adobe.com/flex/3/langref/mx/charts/LegendItem.html

自定义图例的示例： How to exclude series in legend (Flex)