`
chensong215
  • 浏览: 27210 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

flex4 改变DataTip的样式

    博客分类:
  • flex
 
阅读更多
由于暂时只用到二种,所以先附上代码,其它类型的可参考修改

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


分享到:
评论

相关推荐

    flex图表中DataTips样式(背景颜色、文字颜色,等...)

    4. **应用样式**:在Flex组件中,我们可以通过`styleName`属性将创建的样式类应用到DataTips实例上。例如: ```actionscript var dataTip:DataTip = new DataTip(); dataTip.styleName = "dataTipBackground"; ...

    Atom-atom-ide-datatip,替换数据工具提示提供程序,它最初是来自Facebook的Atom IDE包的一部分。.zip

    Atom-atom-ide-datatip.zip,替换数据工具提示提供程序,它最初是来自Facebook的Atom IDE包的一部分。Atom IDE数据提示包,atom是一个用web技术构建的开源文本编辑器。

    DataTip.unitypackage

    Unity中三维模型可视化数据标注,动态连接三维模型与平面ui,点击展开数据提示,自动收起非交互数据提示

    atom-ide-datatip:Atom IDE的数据提示

    atom-ide-datatip软件包 由Facebook开发的原始Atom-IDE / Nuclide软件包替代了DataTip功能。 入门 在Atom中安装atom-ide-datatip 。 安装您要使用的IDE语言包: TypeScript和JavaScript Python 防锈防锈 您也...

    通过鼠标或箭头键获得多条曲线的数据提示:功能“DataTip.m”在鼠标指针位置显示完全可定制的数据提示。 它适用于常规图形或 GUI。-matlab开发

    特征: •完全可定制的数据提示。 • 没有要传递的论据。 从图中检索所有值。... • 也适用于箭头键。 • 激活鼠标右键以显示内插值。 • 显示最靠近鼠标指针的数据点。 • 与鼠标指针保持一定距离的曲线。...

    js DuPont 结构图

    4. **datatip(数据提示)**:当用户悬停在图表上的某个特定点时,datatip会显示额外的详细信息,如具体数值、百分比或简短说明。这提高了用户的互动体验,并提供了即时的可视化反馈。 5. **节点可收缩**:在复杂的...

    matlab开发-ConverttoCursor.zip.zip

    1. **光标工具**:MATLAB的图形用户界面(GUI)支持创建光标工具,用户可以自定义光标的样式和行为。`uitoolbar`和`uiaxes`函数可以帮助我们添加和管理光标。例如,`addhandler`函数可以用来绑定光标到特定的轴,使...

    matlab开发-correctticklabel

    4. **更新标签**:当坐标轴范围改变时,重新计算新的标签,并用`set`函数更新`xticklabels`属性。 5. **处理数据光标事件**:如果涉及数据光标,还需要监听`'DataCursorMove'`事件,更新光标位置对应的标签。 6. *...

    matlab开发-图窗口的数据游标

    `datatip`函数通常用于创建一个静态的数据提示,而`datacursormode`则可以开启或关闭数据游标模式,使得用户能够在图形上自由移动游标。例如,要开启数据游标模式,可以执行以下命令: ```matlab datacursormode on...

    OzCode Debugger 1.0 Patch + License

    All of OzCode’s features are embedded into Visual Studio’s DataTip and Quick Watch and don’t require opening any new windows. Simply hover over a variable, object or statement while debugging to ...

    js DuPont 杜邦

    3. **交互事件处理**: `mouseOver`事件在用户将鼠标指针移动到元素上时触发,常用于显示额外信息或改变元素样式。`mouseOut`事件则在鼠标移出元素时触发,通常用于撤销`mouseOver`时的效果。在杜邦结构图中,这两个...

    matlab绘图:7 matlab图形手动编辑.zip

    5. **曲线编辑**:可以使用`plotedit`模式来直接在图形上修改曲线的属性,如改变点的位置、添加文本或更改线型。 6. **图例和标签**:`legend`函数用于创建图例,`xlabel`、`ylabel`和`title`分别用于设置x轴、y轴...

    Allegro tips_tricks.pdf

    使用功能键(Function Keys)可以快速执行改变活动/备选层、删除元素、移动组件、旋转和镜像组件等操作。此外,还有通过功能键实现单次点击执行的移动组件、定位、旋转文本等快捷功能。 3. 高级设计功能 文档介绍了...

    matlab开发-Multidimensionalplotting.zip.zip

    - **动画**:通过连续改变某些参数,如时间,来展示四维及以上数据随时间变化的动态过程。 3. **多图窗和子图**: - subplot函数:可以创建多个子图在同一窗口中,便于对比和分析不同维度的数据。 - figure函数...

    pb,graph曲线图综合应用

    例如,可以设置图表的类型(如曲线图、柱状图等)、颜色、线条样式等。 在Graph控件中,横坐标通常表示时间或者分类,而纵坐标则代表数值数据。在PB中,我们可以通过修改XAxis和YAxis的相关属性来调整坐标轴的范围...

    用Ext实现报表中的核心问题解决方案

    - `dataTip`:自定义数据提示框的样式。 ##### 2. X轴和Y轴的注释 对于X轴和Y轴的注释,可以通过设置`xAxis`和`yAxis`属性来实现。例如: - `xAxis`:通过`majorTicks`、`minorTicks`、`majorGridLines`等属性...

    Winform + ZedGraph + 显示坐标点和绘制游标

    2. **DataTip**:你可以自定义数据提示框,当鼠标悬停在点上时显示详细信息。通过设置`GraphPane`的`DataTipTemplate`属性,可以定制显示的内容,例如坐标值、额外的数据字段等。 3. **Custom Draw Points**:如果...

    AspMvc框架 v1.1

    ┝ DataTip 时间控制 ┝ Editor Web编辑器 ┝ Images 图片文件夹 ┝ Js 脚本文件夹 ┝ Md5 Md5文件夹 ┝ PublicFile 网站公用文件夹 ┗ Swf 动画文件夹 ┃ ┝ Tool 工具集 ┝ AspValidate 服务端验证 ┝ ...

    Matlab图形的编辑(含绘图修改的奥义[收集].pdf

    - `plot`函数是Matlab中最基础的绘图函数,它可以设定线型、颜色和标记样式。例如,`plot(x, y, 'r--')`表示用红色虚线绘制x与y的关系。 2. **图形尺寸和字体设置**: - 可通过菜单`File` -&gt; `Export Setup`调整...

Global site tag (gtag.js) - Google Analytics