Переопределить круг данных

Question

В гибком графике вы можете настроить поле, в котором отображается информация о всплывающих подсказках, но есть ли простой способ изменить маленький кружок, отображаемый рядом с полем с подсказками?

http://help.adobe.com/en_US/flex/using/images/chd_SimpleDataTip.png

Я нашел метод positionDataTips () в ChartBase, который, кажется, выполняет рисование круга.Я собирался создать подкласс LineChart и переопределить метод моей модифицированной версией.Однако этому методу требуется доступ ко многим частным переменным экземпляра, которые доступны только для ChartBase.

Мысли?

Answer 1

Я провел очень долгую неделю, занимаясь этим и другими вопросами, связанными с всплывающими подсказками. У меня есть ответ на похожий вопрос на похожий вопрос , на который вы можете посмотреть. Я опубликую здесь измененную версию этого ответа, так как он никогда не был помечен как ответ на вопрос : - (

---

Нет хорошей документации о том, как именно работать с переопределением двух массивных функций, ChartBase.positionDataTips и ChartBase.positionAllDataTips. Я потратил много дней, копаясь в коде mx-диаграмм, чтобы определить лучший способ переопределить эти функции, чтобы согнуть гибкие диаграммы под мою волю: -P

Вот некоторый (с трудом заработанный) код для настройки целей всплывающих подсказок по умолчанию, круги по умолчанию, которые отображаются при наведении курсора мыши на серию.

1. Создайте новый класс диаграммы, который расширяет ChartBase или его потомка.
2. Установите стиль ChartBase, showDataTipTargets, в false.
3. Создайте новый стиль, showCustomDataTipTargets, для своего пользовательского класса диаграммы.
   • Возможно, вы даже захотите создать стиль для dataTipTargetRenderer, чтобы выполнить пользовательский рендеринг. Это было бы гораздо более элегантное решение.
4. Переопределить positionDataTips и positionAllDatatips
   • Я написал код для рисования квадрата, но чтобы сделать большой круг, просто используйте свои собственные значения вместо TOOLTIP_TARGET_RADIUS и TOOLTIP_TARGET_INNER_RADIUS.

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

override protected function positionDataTips():void
{
  // Setting the showDataTipTargets to false will prevent 
  // super.positionDataTips() from drawing the default bulls-eyes.
  // By setting this style, we allow super.positionDataTips() to do all 
  // the "heavy-lifting" involved with dataTip positioning and dataTip box rendering
  // before we do our customization of the dataTipTargets
  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 code from ChartBase.positionDataTips as a guide, 
  // I have written code to simply draw a square instead of circle.
  // You can do much more complex things here as needed.
  if (len > 1)
  {
    // calloutStroke code is copied verbatim from super function
    // However, you can customize the calloutStroke rendering just as easily
    // by modifying the following code!
    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);
        }
    }
  }

  // Here is custom dataTipTarget code!!
  // It draws a 5x5 square around the point on the series
  var tipColor:uint = tipData.hd.contextColor;
  g.lineStyle(1, tipColor, 100);
  g.moveTo(tipData.x, tipData.y);
  g.beginFill(0xFFFFFF, 1);
  g.drawRect(tipData.x, tipData.y, 5, 5);
  g.endFill();

}

---

Ниже приведен код, скопированный с ChartBase.positionDataTip() для справки:

  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();