Flex 中的自定义数据提示
Custom DataTip in Flex
我想在 Flex 4 的图表中使用数据提示。我知道如何使用它们,但标准数据提示仅显示文本。我想显示文字+一个按钮。我将如何处理这件事?
我考虑过在自定义数据提示中扩展数据提示 class 并像这样在某处添加按钮
public class MyDataTip extends DataTip {
// Override some methods to add the button here?
}
这可能/正确的想法吗?或者我必须做不同的事情吗?
有这方面的代码示例吗?
您可以使用 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">
我想在 Flex 4 的图表中使用数据提示。我知道如何使用它们,但标准数据提示仅显示文本。我想显示文字+一个按钮。我将如何处理这件事?
我考虑过在自定义数据提示中扩展数据提示 class 并像这样在某处添加按钮
public class MyDataTip extends DataTip {
// Override some methods to add the button here?
}
这可能/正确的想法吗?或者我必须做不同的事情吗? 有这方面的代码示例吗?
您可以使用 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">