tooltip详解(1)——概述


提示框组件tooltip详解

提示框组件可以设置在多种地方:

  • 可以设置在全局,即 tooltip
  • 可以设置在坐标系中,即 grid.tooltip、polar.tooltip、single.tooltip
  • 可以设置在系列中,即 series.tooltip
  • 可以设置在系列的每个数据项中,即 series.data.tooltip

下面是tooltip的部分参数的取值及含义:

下面我们来解析部分tooltip的一些常用属性:

(1)提示内容对其方式:textStyle。

textStyle:{
align:'left'
}

tooltip的align的值可以有“center”、left、right,分别代表“居中对齐“、“左对齐”、“右对齐”。

(2)提示框触发方式:trigger

tooltip的trigger的值可以有’item’、’axis’。

  • ‘item’:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
  • ‘axis’:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用

(3)提示框触发的条件:tooltip. triggerOn

tooltip的triggerOn的值可以有:

  • ‘mousemove’

鼠标移动时触发。

  • ‘click’

鼠标点击时触发。

  • ‘mousemove|click’

同时鼠标移动和点击时触发。

  • ‘none’

不在 ‘mousemove’ 或 ‘click’ 时触发,用户可以通过 action.tooltip.showTip 和 action.tooltip.hideTip 来手动触发和隐藏。也可以通过 axisPointer.handle 来触发或隐藏。。

(4)提示框的格式:formatter

提示框的格式主要分为两种:

字符串模板和自定义模板

字符串模板:

模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 ‘axis’ 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:

  • 折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
  • 散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
  • 地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
  • 饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

自定义函数(回调函数):

回调函数格式:

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

第一个参数 params 是 formatter 需要的数据集。

格式如下:

{
     componentType: 'series',
     // 系列类型
     seriesType: string,
     // 系列在传入的 option.series 中的 index
     seriesIndex: number,
     // 系列名称
     seriesName: string,
     // 数据名,类目名
     name: string,
     // 数据在传入的 data 数组中的 index
     dataIndex: number,
     // 传入的原始数据项
     data: Object,
     // 传入的数据值
     value: number|Array,
     // 数据图形的颜色
     color: string,

     // 饼图的百分比
     percent: number,

 }

在 trigger 为 ‘axis’ 的时候,或者 tooltip 被 axisPointer 触发的时候,params 是多个系列的数据数组。其中每项内容格式同上,并且,

{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名,类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)
    value: number|Array|Object,
    // 坐标轴 encode 映射信息,
    // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)
    // value 必然为数组,不会为 null/undefied,表示 dimension index 。
    // 其内容如:
    // {
    //     x: [2] // dimension index 为 2 的数据映射到 x 轴
    //     y: [0] // dimension index 为 0 的数据映射到 y 轴
    // }
    encode: Object,
    // 维度名列表
    dimensionNames: Array<String>,
    // 数据的维度 index,如 0 或 1 或 2 ...
    // 仅在雷达图中使用。
    dimensionIndex: number,
    // 数据图形的颜色
    color: string,

}

第二个参数 ticket 是异步回调标识,配合第三个参数 callback 使用。

第三个参数 callback 是异步回调.

在提示框浮层内容是异步获取的时候,可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。

tooltip提示框详解:

下面我们举一个tooptip的实例,相关代码的对应解释见注释。

tooltip ={                                      //提示框组件
trigger: 'item',                            //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
triggerOn:"mousemove",                      //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
showContent:true,                           //是否显示提示框浮层
alwaysShowContent:true,                     //是否永远显示提示框内容
showDelay:0,                                  //浮层显示的延迟,单位为 ms
hideDelay:100,                                //浮层隐藏的延迟,单位为 ms
enterable:false,                             //鼠标是否可进入提示框浮层中
confine:false,                               //是否将 tooltip 框限制在图表的区域内
transitionDuration:0.4,                      //提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动
position:['50%', '50%'],                    //提示框浮层的位置,默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数,inside鼠标所在图形的内部中心位置,top、left、bottom、right鼠标所在图形上侧,左侧,下侧,右侧,
formatter:"{b0}: {c0}<br />{b1}: {c1}",     //提示框浮层内容格式器,支持字符串模板和回调函数两种形式,模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等
backgroundColor:"transparent",            //标题背景色
borderColor:"#ccc",                        //边框颜色
borderWidth:0,                              //边框线宽
padding:5,                                  //图例内边距,单位px  5  [5, 10]  [5,10,5,10]
textStyle:mytextStyle,                     //文本样式
};

评论区(0)

评论