Question

我在flex3.0中有一个柱形图。我无法更改Datatip的字体颜色或背景肤色。我将datatip设置为true，并且没有为Datatip更改任何函数。

                         <mx:Panel title="Angles" alpha="1" color="#88442"  backgroundColor="#ffffff" >
    <mx:ColumnChart id="myColumnChart"    showDataTips="true"color="#88442 height="500" 
                    width="1300"  

                    dataProvider="{graphbar_data}"  
                    selectionMode="multiple"
                    dragEnabled="true" 
                    dropEnabled="false"

                    >

Answer 1

您可以通过样式属性更改它。

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" 
minWidth="955" minHeight="600">

<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable]private var graphbar_data:ArrayCollection = new ArrayCollection([
            {Month:"Jan", Profit:2000, Expenses:1500},
            {Month:"Feb", Profit:1000, Expenses:200},
            {Month:"Mar", Profit:1500, Expenses:500}
        ]);
    ]]>
</mx:Script>

<mx:Style>
    @namespace mx "library://ns.adobe.com/flex/mx";

    mx|DataTip {
        fontFamily: "Arial";
        fontSize: 14; 
        fontWeight:bold;
        fontStyle:italic; 
        backgroundColor:#ffff42;
        color:#ff0000;
    }
</mx:Style>

<mx:Panel title="Angles" x="20" y="20" width="400" height="300" alpha="1" color="0x88442" backgroundColor="0xffffff">
    <mx:ColumnChart 
        id="myColumnChart"    
        showDataTips="true"
        color="0x88442" 
        height="100%" 
        width="100%"  
        dataProvider="{graphbar_data}"  
        selectionMode="multiple"
        dragEnabled="true" 
        dropEnabled="false">

        <mx:horizontalAxis>
            <mx:CategoryAxis dataProvider="{graphbar_data}" categoryField="Month"/>
        </mx:horizontalAxis>

        <mx:series>
            <mx:ColumnSeries xField="Month" yField="Profit" displayName="Profit"/>
            <mx:ColumnSeries xField="Month" yField="Expenses" displayName="Expenses"/>
        </mx:series>    

    </mx:ColumnChart>
</mx:Panel>
</mx:Application>

我正在使用Flex 4.6。如果您只有第3版，则应该定义如下样式：

<mx:Style>
    DataTip {
        fontFamily: "Arial";
        fontSize: 14; 
        fontWeight:bold;
        fontStyle:italic;    
        backgroundColor:#ffff42;
        color:#ff0000;        
    }
</mx:Style>

Answer 2

尝试此自定义数据提示操作脚本。

// charts/MyDataTip.as
package {
import mx.charts.chartClasses.DataTip;
import mx.charts.*;
import flash.display.*; 
import flash.geom.Matrix;
import flash.text.TextField;     

public class MyDataTip extends DataTip {

    // The title is renderered in a TextField.
    private var myText:TextField; 

    public function MyDataTip() {
        super();            
    }       

    override protected function createChildren():void{ 
        super.createChildren();
        myText = new TextField();
    }

    override protected function updateDisplayList(w:Number, h:Number):void {
        super.updateDisplayList(w, h);

        // The data property provides access to the data tip's text.
        if(data.hasOwnProperty('text')) {
            myText.text = data.text;
        } else {
            myText.text = data.toString();        
        }

        this.setStyle("textAlign","center");
         this.setStyle("color","#FFFFFF");
        var g:Graphics = graphics; 
        g.clear();  
        var m:Matrix = new Matrix();
        m.createGradientBox(w+100,h,0,0,0);
        g.beginFill(0x339966,1);
        g.drawRect(-50,0,w+100,h);
        g.endFill(); 
    }
 }
}

并在creationComplete =“applyCustomDataTips（）”函数中使用此动作脚本。

例如：

 public function applyCustomDataTips():void {
    myColumnChart.setStyle("dataTipRenderer",MyDataTip);    
}

参考Custom DataTip Renderer

在Flex3.0中更改柱形图中datatatip的颜色

2 个答案: