如何在Flex图表中自定义突出显示的数据点圈？

Question

我需要使用LineSeries自定义标准Flex LineChart的外观。我无法弄清楚当鼠标指针悬停在数据点上时如何更改默认圆圈。

Answer 1

如果要删除这些圈子，请将图表的属性showDataTipTargets设置为false。如果您想自定义它们，您可以：

1. 创建自定义dataTipRenderer并在那里执行蒙皮和绘图 或
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 2

Timofei Davydik给出了一个非常好的答案，它也有助于我使用数据提示工作

但是我在评论中看到，对于如何使用覆盖两个大型函数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 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>