Flex中的自定义数据提示

我想在Flex 4的图表中使用数据提示。我知道如何使用它们，但标准DataTip只显示文本。我想显示文本+一个按钮。我会怎么继续呢？Flex中的自定义数据提示

我想到了一个自定义数据提示类数据提示扩展，并添加按钮，有没有什么地方像这样

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

这是可能的/正确的想法？或者我必须以不同的方式做？这个任何代码示例？

来源

2017-02-07 user975561

你为什么要对数据提示的按钮？您将无法单击该按钮，因为当您移动光标位置时，数据提示消失。 – gbdcool

我可以移动它，然后它保持。该按钮应用于切换到详细视图。 – user975561

您可以使用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>

而在你的图表MXML标签只需添加以下

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

来源

2017-02-10 10:19:35 Sumit

Flex中的自定义数据提示

回答

相关问题