[AS3]ToolTip类的升级版

# package project.do93.pflip.view
# {
#
# import flash.accessibility.AccessibilityProperties;
# import flash.display.*;
# import flash.events.*;
# import flash.geom.Point;
# import flash.text.*;
# /**
# * @link kinglong@gmail.com
# * @author Kinglong
# * @version 0.1
# * @since 20090608
# * @playerversion fp9+
# * 热区提示
# */
# public class ToolTip extends Sprite {
# private static var instance:ToolTip = null;
# private var label:TextField;
# private var area:DisplayObject;
# public function ToolTip() {
# label = new TextField();
# label.autoSize = TextFieldAutoSize.LEFT;
# label.selectable = false;
# label.multiline = false;
# label.wordWrap = false;
# label.defaultTextFormat = new TextFormat("宋体", 12, 0x666666);
# label.text = "提示信息";
# label.x = 5;
# label.y = 2;
# addChild(label);
# redraw();
# visible = false;
# mouseEnabled = mouseChildren = false;
# }
#
# private function redraw() {
# var w:Number = 10 + label.width;
# var h:Number = 4 + label.height;
# this.graphics.clear();
# this.graphics.beginFill(0x000000, 0.4);
# this.graphics.drawRoundRect(3, 3, w, h, 5, 5);
# this.graphics.moveTo(6, 3 + h);
# this.graphics.lineTo(12, 3 + h);
# this.graphics.lineTo(9, 8 + h);
# this.graphics.lineTo(6, 3 + h);
# this.graphics.endFill();
# this.graphics.beginFill(0xffffff);
# this.graphics.drawRoundRect(0, 0, w, h, 5, 5);
# this.graphics.moveTo(3, h);
# this.graphics.lineTo(9, h);
# this.graphics.lineTo(6, 5 + h);
# this.graphics.lineTo(3, h);
# this.graphics.endFill();
# }
#
# public static function init(base:DisplayObjectContainer) {
# if (instance == null) {
# instance = new ToolTip();
# base.addChild(instance);
# }
# }
#
# public static function register(area:DisplayObject, message:String):void {
# if(instance != null){
# var prop:AccessibilityProperties = new AccessibilityProperties();
# prop.description = message;
# area.accessibilityProperties = prop;
# area.addEventListener(MouseEvent.MOUSE_OVER, instance.handler);
# }
# }
#
# public static function unregister(area:DisplayObject):void {
# if (instance != null) {
# area.removeEventListener(MouseEvent.MOUSE_OVER, instance.handler);
# }
# }
#
# public function show(area:DisplayObject):void {
# this.area = area;
# this.area.addEventListener(MouseEvent.MOUSE_OUT, this.handler);
# this.area.addEventListener(MouseEvent.MOUSE_MOVE, this.handler);
# label.text = area.accessibilityProperties.description;
# redraw();
# }
#
#
# public function hide():void {
# this.area.removeEventListener(MouseEvent.MOUSE_OUT, this.handler);
# this.area.removeEventListener(MouseEvent.MOUSE_MOVE, this.handler);
# this.area = null;
# visible = false;
# }
#
# public function move(point:Point):void {
# var lp:Point = this.parent.globalToLocal(point);
# this.x = lp.x - 6;
# this.y = lp.y - label.height - 12;
# if(!visible){
# visible = true;
# }
# }
#
# private function handler(event:MouseEvent):void {
# switch(event.type) {
# case MouseEvent.MOUSE_OUT:
# this.hide();
# break;
# case MouseEvent.MOUSE_MOVE:
# this.move(new Point(event.stageX, event.stageY));
# break;
# case MouseEvent.MOUSE_OVER:
# this.show(event.target as DisplayObject);
# this.move(new Point(event.stageX, event.stageY))
# break;
# }
# }
#
# }
# }
调用:
# import project.do93.pflip.view.ToolTip;
# var base:Sprite = new Sprite();
# addChild(base);
# var sp:Sprite = new Sprite();
# sp.mouseEnabled=sp.mouseChildren=false;
# addChild(sp);
# //初始化ToolTip;
# ToolTip.init(sp);
# //与显示元素关联。
# ToolTip.register(xxx_mc, "http://www.klstudio.com");
# ToolTip.register(btn1, "我是按钮1");
# ToolTip.register(btn2, "我是按钮2");
要在 ECharts 中使用富文本版的 Tooltip(工具提示),你可以通过 `tooltip` 配置项中的 `formatter` 属性来实现。 以下是一个示例代码: HTML部分: ```html <div id="chart" style="width: 600px; height: 400px;"></div> ``` JavaScript部分: ```javascript // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('chart')); // 配置项 var option = { // x轴数据 xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, // y轴数据 yAxis: { type: 'value' }, // 系列数据 series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }], // 工具提示配置 tooltip: { trigger: 'axis', // 触发型为坐标轴 formatter: function(params) { var tooltipHtml = ''; params.forEach(function(item) { tooltipHtml += '<div>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + item.color + '"></span>' + '<span>' + item.seriesName + ': ' + item.value + '</span>' + '</div>'; }); return tooltipHtml; } } }; // 使用配置项显示图表 myChart.setOption(option); ``` 在上述代码中,我们使用 `formatter` 属性来自定义工具提示的显示内容。在 `formatter` 函数中,我们遍历 `params` 参数数组,其中包含了每个数据项的详细信息。然后我们自定义了一个富文本的 HTML 字符串来构建工具提示的显示内容。 在这个例子中,我们将每个数据项的系列名称和数值显示为一个带有颜色块的行,并使用 CSS 样式来设置颜色块和文本的样式。 希望这个示例对你有帮助。如果你还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值