Как настроить выделенные круги точек данных в диаграммах Flex?

Question

Мне нужно настроить внешний вид стандартного Flex LineChart с LineSeries.Я не могу понять, как изменить круги по умолчанию, нарисованные, когда указатель мыши находится над точкой данных.

Answer 1

Тимофей Давыдик дал очень хороший ответ, и это также помогло моей работе с всплывающими подсказками

Однако я вижу в комментариях, что возникла путаница относительно того, как именно работать с переопределением двух массивных функций, ChartBase.positionDataTips и ChartBase.positionAllDataTips.

Для этого можно сделать следующее:

1. Создать новый класс диаграммы, расширяющий ChartBase или его дочерний элемент.
2. Установите для стиля ChartBase showDataTipTargets значение false.
3. Создайте новый стиль, showCustomDataTipTargets, для своего пользовательского класса диаграммы.
4. Переопределите positionDataTips и positionAllDatatips

Новые переопределенные функции должны выглядеть примерно так:

override protected function positionDataTips():void
{
  this.setStyle("showDataTipTargets", false);

  // this will do all the normal rendering of the datatips and callout
  // but it will not draw the dataTipTarget because that is dependent upon
  // the style, showDataTipTargets
  super.positionDataTips();

  // now here you draw your custom datatip target. 
  // Use the following code as a guide, it is
  // copied from the ChartBase.positionDataTips
  /*
  if (len > 1)
  {
    if (calloutStroke)
    {
      calloutStroke.apply(g,null,null);

      if (tipData.isRight)
      {                   
        g.moveTo(chartLocalPts.x,
                chartLocalPts.y + tipData.height /  2);
        g.lineTo(tipData.x,
                chartLocalPts.y + tipData.height / 2);
        g.lineTo(tipData.x, tipData.y);
      }
      else
      {
        if(layoutDirection == LayoutDirection.RTL)
        {
        g.moveTo(chartLocalPts.x - tipData.width,
        chartLocalPts.y + tipData.height / 2);
        }
        else
        {
        g.moveTo(chartLocalPts.x + tipData.width,
        chartLocalPts.y + tipData.height / 2);
        }
          g.lineTo(tipData.x,
                  chartLocalPts.y + tipData.height / 2);
          g.lineTo(tipData.x, tipData.y);
        }
    }
  }

  var tipColor:uint = tipData.hd.contextColor;
  g.lineStyle(1, tipColor, 100);
  g.moveTo(tipData.x, tipData.y);
  g.beginFill(0xFFFFFF, 1);
  g.drawCircle(tipData.x, tipData.y, TOOLTIP_TARGET_RADIUS);
  g.endFill();

  g.beginFill(tipColor, 1);
  g.drawCircle(tipData.x, tipData.y,
            TOOLTIP_TARGET_INNER_RADIUS);
  g.endFill();
  */

}

Answer 2

Если вы хотите удалить эти круги, установите для свойства showDataTipTargets диаграммы значение false. Если вы хотите настроить их, вы можете:

1. Создайте свой собственный dataTipRenderer и сделайте там скины и рисунки.
   OR
2. Расширьте свой LineChart и переопределите positionAllDataTips метод, который определен в ChartBase классе. Вот код, отвечающий за рисование кругов:

Код:

if (showTarget) {

    if (len>1) {
        if (calloutStroke) {
            calloutStroke.apply(g, null, null);
            if (tipData.isRight) {
                g.moveTo(localPts.x,
                    localPts.y+tipData.height/2);
            g.lineTo(tipData.x,
                    localPts.y+tipData.height/2);
            g.lineTo(tipData.x, tipData.y);
        }
        else {
            if (layoutDirection == LayoutDirection.RTL) {
                g.moveTo(localPts.x-tipData.width,
                        localPts.y+tipData.height/2);
            }
            else {
                g.moveTo(localPts.x+tipData.width,
                        localPts.y+tipData.height/2);
            }
            g.lineTo(tipData.x,
                    localPts.y+tipData.height/2);
            g.lineTo(tipData.x, tipData.y);
        }
    }
}

var tipColor:uint=tipData.hd.contextColor;
g.lineStyle(1, tipColor, 100);
g.moveTo(tipData.x, tipData.y);
g.beginFill(0xFFFFFF, 1);
g.drawCircle(tipData.x, tipData.y, TOOLTIP_TARGET_RADIUS);
g.endFill();

Answer 3

Решение

Необходимо создать пользовательский itemRenderer и нарисовать все, что вы хотите в обработчике событий MOUSE_OVER.Для свойства showDataTipTargets диаграммы должно быть установлено значение false

. При поиске решения я забыл, что itemRenderer является компонентом Flex и может обрабатывать события мыши.Мои коллеги указали на это и помогли решить проблему.

Код

CustomDataTipTargetRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                creationComplete="init()"
                ...>
    <fx:Script>
        <![CDATA[
            private function init():void
            {
                addEventListener(MouseEvent.MOUSE_OVER, onMouseOver); 
                addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
            }

            private function onMouseOver(event:MouseEvent):void
            { 
                // Show custom data tip target point. 
            } 

            private function onMouseOut(event:MouseEvent):void
            { 
                // Hide custom data tip target point.
            }
        ]]>
    </fx:Script>
</s:ItemRenderer>

YourView.mxml

<mx:LineChart ...
              showDataTips="true"
              showDataTipTargets="false">
    ...
    <mx:series>
        <mx:LineSeries ... itemRenderer="yournamespace.CustomDataTipTargetRenderer">
            ...
        </mx:LineSeries>
    </mx:series>
</mx:LineChart>