Override Data Tip Circle

Question

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

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

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

Мысли?

Answer 1

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

---

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

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

1. Создайте новый класс диаграмм, который расширяет ChartBase или его дочерние элементы.
2. Установите ChartBase стиль, showDataTipTargets, на false.
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();