覆盖数据提示圈 [英] Override Data Tip Circle

问题描述

在弹性制图中，您可以自定义显示数据提示信息的方框，但有没有简单的方法可以改变数据提示框旁显示的小圆圈？ > http://help.adobe.com/zh_CN/flex/using/ images / chd_SimpleDataTip.png

我在ChartBase中找到了方法positionDataTips（），它似乎是做了圆的绘制。我打算继承LineChart并用我的修改版本覆盖该方法。然而，这个方法需要访问很多私有的实例变量，这些变量只能被ChartBase访问。

想法？

我可以在类似的问题上找到类似问题的答案，您可以查看。我将在这里发布该答案的修改版本，因为它从来没有被标记为问题的答案： - （

）

---

没有任何关于如何重写这两个大型函数 ChartBase.positionDataTips 和 ChartBase.positionAllDataTips 我花了很多天，通过mx图表代码来确定重写这些函数的最好方法，以便将flex图表折叠到我的意愿中:-P

以下是一些（来之不易的）代码，用于自定义数据提示目标，这是鼠标悬停在一系列图标上时显示的默认的多角形圆圈。

1. 创建一个新的图表类，它可以扩展 ChartBase 或其子元素。 ChartBase 样式， showDataTipTargets ，设为false


2. 创建一个新样式， showCustomDataTipTargets ，在您的自定义图表类中。
   
   
   
   
   • 您甚至可能希望为 dataTipTargetRenderer 创建一个样式来执行自定义渲染。这将是一个更优雅的解决方案。
     
   
   
   • 覆盖 positionDataTips 和 positionAllDatatips
     
     
     
     
     • 我已经编写了代码来绘制一个正方形，但要制作一个更大的圆形，只需使用您自己的值代替 TOOLTIP_TARGET_RADIUS 和 TOOLTIP_TARGET_INNER_RADIUS 。
     
     
   
   

新的重写函数看起来像这样：

  {
 //将showDataTipTargets设置为false会阻止
 // super.positionDataTips（）绘制默认的公牛眼睛。 
 //通过设置这个样式，我们允许super.positionDataTips（）完成所有
 //数据提示定位和数据提示框渲染
 //所涉及的繁重工作我们定制的dataTipTargets 
 this.setStyle（showDataTipTargets，false）; 
 
 //这将完成数据提示和标注
的所有常规渲染//但它不会绘制dataTipTarget，因为它依赖于
 // style，showDataTipTargets 
 super.positionDataTips（）; 
 
 //现在在这里绘制自定义数据提示目标。 
 //使用ChartBase.positionDataTips中的代码作为指导，
 //我已经编写代码来绘制一个正方形而不是圆形。 
 //根据需要，您可以在这里做更复杂的事情。 
 if（len> 1）
 {
 // calloutStroke代码是从超级函数
逐字拷贝的//然而，您可以自定义calloutStroke渲染，就像一样简单
 //通过修改下面的代码！ 
 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）; 
} 
} 
} 
 
 //这里是自定义的dataTipTarget代码！ 
 //它在系列
 var tipColor：uint = tipData.hd.contextColor;上绘制一个5x5的正方形。 
 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（）; 
 
 $ b $ / code $ / pre 
 
 
 
 
是从 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（）; 
  
 
In flex charting you can customize the box which displays datatip information, but is there any easy way of changing the little circle which is displayed next to the datatip box?


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

I've found the method positionDataTips() in ChartBase which appears to do the drawing of the circle. I was going to subclass LineChart and override the method with my modified version of it. However, this method needs access to a lot of private instance variables which are only accessible to ChartBase.

Thoughts?
解决方案
I spent a very long week dealing with this and other issues relating to chart datatips.
I have an answer to a similar question at similar question that you can look at.  I will post here a modified version of that answer, since it was never marked as the answer to the question :-(



There isn't any good documentation on how exactly to work with overriding the two massive functions, ChartBase.positionDataTips and ChartBase.positionAllDataTips.  I spent many days digging through mx charting code to determine the best way to override these functions in order to bend the flex charts to my will :-P

Here is some (hard-earned) code to customize the data tip targets, the default bulls-eye circles that show upon mouse hover over a series.

Create a new chart class that extends ChartBase or a child of that.
Set the ChartBase style, showDataTipTargets, to false. 
Create a new Style, showCustomDataTipTargets, on your custom chart class.


you might even want to create a Style for a dataTipTargetRenderer to do the custom rendering.  This would be a much more elegant solution.

Override positionDataTips and positionAllDatatips


I have written code to draw a square, but to make a larger circle, simply use your own values in place of TOOLTIP_TARGET_RADIUS and TOOLTIP_TARGET_INNER_RADIUS.

The new overridden functions would look something like this:
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();

}




Below is the code copied from ChartBase.positionDataTip() for reference:
  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();


                        
这篇关于覆盖数据提示圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！