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

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к ложному.
3. Создать новый стиль, showCustomDataTipTargetsна вашем пользовательском графике класса.
   • Вы могли бы даже хотеть создать Стиль для dataTipTargetRenderer сделать пользовательский рендеринг. Это было бы гораздо более элегантным решением.
4. Override 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();