플렉스 차트에서 CircleItemRenderer를 사용자 정의하는 방법은 무엇입니까?

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의, 다른 시리즈 스타일 '반경'

각 데이터 포인트의 그래프 요소의 반경을 픽셀 단위로 지정을 갖는다. 기본적으로 PlotChart 컨트롤은 각 데이터 요소에 원을 그립니다. MXML 또는 스타일을 사용하여이 속성을 설정할 수 있습니다. 기본값은 5 픽셀입니다.

와 'adjustedRadius는'

차트 아이템의 반경을 강조하거나 선택할 때 증가되어야하는 픽셀의 개수를 지정한다. 기본값은 2입니다.

radius는 각 항목 렌더러의 기본 너비와 높이를 결정하고 adjustedRadius는 사용자 상호 작용을 기반으로 조정합니다. 이 코드는 항목 렌더러에 표시됩니다. 다음은 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

원만한 itemrenderer의 크기를 늘리려면 scaleX, scaleY 속성을 사용하십시오.