Flex 中的自定义数据提示答案

【问题标题】：Custom DataTip in FlexFlex 中的自定义数据提示
【发布时间】：2017-02-07 17:55:44
【问题描述】：

我想在 Flex 4 的图表中使用数据提示。我知道如何使用它们，但标准数据提示只显示文本。我想显示文本+一个按钮。我将如何处理这件事？

我考虑过在自定义 DataTip 类中扩展 DataTip，然后在类似这样的地方添加按钮

public class MyDataTip extends DataTip {
    // Override some methods to add the button here?
}

这可能/正确的想法吗？还是我必须以不同的方式做？有这方面的代码示例吗？

【问题讨论】：

为什么要在 DataTip 上有一个按钮？您将无法单击该按钮，因为当您移开光标位置时，DataTip 会消失。
我可以在它上面移动，然后它会停留。该按钮应用于切换到详细视图。

标签： apache-flex flex4

【解决方案1】：

您可以使用 DataTipRenderer 来实现此目的。这是一个例子。

<?xml version="1.0"?>
<s:Group  xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        implements="mx.core.IFlexDisplayObject, mx.core.IDataRenderer"
        width="120">
<fx:Metadata>
[Event(name="DataSelect", type="flash.events.Event")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.elements.TextFlow;

import mx.charts.HitData;
import mx.charts.series.items.ColumnSeriesItem;

private var _data:HitData;

[Bindable]
private var _xValue:String;

[Bindable]
private var _yValue:String;

[Bindable]
private var _displayText:TextFlow;

public function get data():Object
{
    // TODO Auto Generated method stub
    return null;
}

public function set data(value:Object):void
{
    // HitData data from chart
    _data = value as HitData;

    // The display text used in datatip which comes in HTML format
    _displayText = TextConverter.importToFlow(_data.displayText, TextConverter.TEXT_FIELD_HTML_FORMAT);

    // HitData contains a reference to the ChartItem
    var item:ColumnSeriesItem = _data.chartItem as ColumnSeriesItem;

    // ChartItem xValue and yValue
    _xValue = String(item.xValue);
    _yValue = String(item.yValue);
}

]]>
</fx:Script>

<fx:Declarations>

</fx:Declarations>

    <s:Rect right="0" left="0" bottom="0" top="0">
        <s:filters>
        <s:DropShadowFilter blurX="20" blurY="20" alpha="0.22" distance="5" angle="90" knockout="false" />
        </s:filters>
        <s:fill>
        <s:SolidColor color="0xFFFFEE"/>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="0x1a1a19"  weight="1" alpha=".2" />
        </s:stroke>
    </s:Rect>

    <s:VGroup width="100%" height="100%" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">

        <s:RichEditableText textFlow="{_displayText}" width="100%" textAlign="center" selectable="false" editable="false"/>

        <s:Button label="Click me !"/>


    </s:VGroup>
</s:Group>

然后在您的 Chart mxml 标签中添加以下内容

 <mx:ColumnChart id="myChart" showDataTips="true" dataTipRenderer="com.CustomDataTipRenderer">

【讨论】：