更改Flex3.0中柱状图中数据提示的颜色

我在flex3.0中有一个柱状图。我无法更改Datatip的字体颜色或背景肤色。我有datatip设置为true，并没有得到任何功能来更改Datatip。更改Flex3.0中柱状图中数据提示的颜色

      <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" 

        >

来源

2013-04-13 user1733735

你可以通过Style属性来改变它。

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。如果您只有第三个版本，则应该像这样定义样式：

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

来源

2013-04-13 15:59:20 Anton

试试这个自定义数据提示操作脚本。

// 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

来源

2013-04-15 13:49:53

更改Flex3.0中柱状图中数据提示的颜色

回答

相关问题