天天看点

flex4 改变DataTip的样式

由于暂时只用到二种,所以先附上代码,其它类型的可参考修改

<mx:ColumnChart width="100%" fontSize="12" fontWeight="normal" fontFamily="宋体" paddingLeft="5" paddingRight="5"

showDataTips="true" dataTipRenderer="com.common.custom.skin.DataTipSkin" dataProvider="{_medalsAC}">

<mx:horizontalAxis>

<mx:CategoryAxis categoryField="shi"/>

</mx:horizontalAxis>

<mx:series>

<mx:ColumnSeries xField="shi" yField="dzsl" displayName="电站总数"/>

</mx:series>

</mx:ColumnChart>

<mx:PieChart id="chart" width="100%" paddingRight="5" paddingLeft="5" fontSize="12" fontWeight="normal" fontFamily="宋体"

showDataTips="true" dataTipRenderer="com.common.custom.skin.DataTipSkin" dataProvider="{_medalsAC}">

<mx:series>

<mx:PieSeries nameField="shi" labelFunction="displayZzjrl" displayName="{}" labelPosition="callout"

field="zzjrl"/>

</mx:series>

</mx:PieChart>

com.common.custom.skin.DataTipSkin文件内容如下:

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"

backgroundColor="#FFFEE9" borderColor="#010101" borderStyle="solid" paddingTop="5" paddingBottom="5" paddingRight="10"

paddingLeft="10" verticalGap="-2" color="#000000" backgroundAlpha="0.81">

<mx:Label text="{_valueText}" width="100%" textAlign="left" fontSize="12" fontWeight="normal"/>

<mx:Label text="{_labelText}" width="100%" textAlign="left" fontWeight="normal" fontSize="12"/>

<fx:Script>

<![CDATA[

import mx.charts.ColumnChart;

import mx.charts.HitData;

import mx.charts.PieChart;

import mx.charts.series.LineSeries;

import mx.charts.series.PieSeries;

import mx.charts.series.items.ColumnSeriesItem;

import mx.charts.series.items.LineSeriesItem;

import mx.charts.series.items.PieSeriesItem;

[Bindable]

private var _labelText:String;

[Bindable]

private var _valueText:String;

override public function set data(value:Object):void {

var hd:HitData = value as HitData;

var item:* = hd.chartItem;

var ser:* = hd.element;

if (item is ColumnSeriesItem) {

//ColumnSeries1287

_labelText = String(item.xValue + ':' + item.yValue);

_valueText = String(ser.displayName);

} else if (item is PieSeriesItem) {

//PieSeries1361

_valueText = value.item[PieSeries(ser).nameField] + ":" + PieSeriesItem(item).value.toString();

_labelText = (" " + PieSeriesItem(item).percentValue).substr(0, 6) + "%";

}

}

]]>

</fx:Script>

</mx:VBox>

继续阅读