Question

<mx:LineSeries form="curve" displayName="BG" yField="Value" xField="DateTime">
    <mx:itemRenderer>
        <fx:Component>
            <mx:CircleItemRenderer height="10" width="20"/>
        </fx:Component>
    </mx:itemRenderer>
</mx:LineSeries>

我想让弹性图表上的圆圈更大..我认为设置高度和宽度可能会改变一些事情..有没有办法设置circleItemRenderer的大小？或者我是否必须创建一个完整的自定义类？

我希望我可以用某种数字来做这件事，因为我想制作一个图表，其中圆的大小取决于不同的值。想法？

Answer 1

LineSeries和其他系列的样式'radius'

指定每个数据点的图表元素的半径（以像素为单位）。默认情况下，PlotChart控件在每个数据点绘制一个圆。您可以在MXML中或使用样式设置此属性。默认值为5像素。

和'adjustedRadius'：

指定突出显示或选择时图表项目半径增加的像素数。默认值为2.

半径确定每个项目渲染器的基本宽度和高度，而adjustRadius则根据用户交互修改它。此代码在项呈示器中可见。这里有一点来自CircleItemRenderer皮肤：。

switch (state)
        {
            case ChartItem.FOCUSED:
            case ChartItem.ROLLOVER:
                if (styleManager.isValidStyleValue(getStyle('itemRollOverColor')))
                    color = getStyle('itemRollOverColor');
                else
                    color = ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),-20);
                fill = new SolidColor(color);
                adjustedRadius = getStyle('adjustedRadius');
                if (!adjustedRadius)
                    adjustedRadius = 0;
                break;
            case ChartItem.DISABLED:
                if (styleManager.isValidStyleValue(getStyle('itemDisabledColor')))
                    color = getStyle('itemDisabledColor');
                else
                    color = ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),20);
                fill = new SolidColor(GraphicsUtilities.colorFromFill(color));
                break;
            case ChartItem.FOCUSEDSELECTED:
            case ChartItem.SELECTED:
                if (styleManager.isValidStyleValue(getStyle('itemSelectionColor')))
                    color = getStyle('itemSelectionColor');
                else
                    color = ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),-30);
                fill = new SolidColor(color);
                adjustedRadius = getStyle('adjustedRadius');
                if (!adjustedRadius)
                    adjustedRadius = 0;
                break;
        }

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

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

        rcFill.right = unscaledWidth;
        rcFill.bottom = unscaledHeight;

        var g:Graphics = graphics;
        g.clear();      
        if (stroke)
            stroke.apply(g,null,null);
        if (fill)
            fill.begin(g, rcFill, null);
        g.drawEllipse(w - adjustedRadius,w - adjustedRadius,unscaledWidth - 2 * w + adjustedRadius * 2, unscaledHeight - 2 * w + adjustedRadius * 2);

        if (fill)
            fill.end(g);

CircleItemRenderer外观只有200行，大部分代码都在updateDisplayList方法中。您可以轻松创建新外观，或者只是覆盖updateDisplayList方法，以便根据渲染器所代表的数据设置半径（使用updateDisplayList方法中的'newRadius = data.someValue'）。

Answer 2

如果您只想增加圆圈项目的大小，请使用scaleX，scaleY属性。

如何在Flex图表中自定义Circle ItemRenderer？

2 个答案: