用户工具

站点工具


侧边栏

1.bi与可视化saca.dataviz:4图表:4.24tooltip悬浮框位置控制

4.24 tooltip悬浮框位置算法

1.使用position的回调函数控制位置

tooltip: {
    show: true,
    customizeTip: "统计经销商本月和全年的进口车\n收车数,包含BMW, MINI。",
    trigger: "axis",
    formatter: "",
    position: function(point, params, dom, rect, size){
        if(point[0] > size.contentSize[0] &&  point[1] > size.contentSize[1]){     
        return [point[0] - size.contentSize[0], point[1]-size.contentSize[1]];
        } else if(point[0] <= size.contentSize[0] &&  point[1] >= size.contentSize[1]){
        return [0, point[1]-size.contentSize[1]];
        } else if(point[0] >= size.contentSize[0] &&  point[1] <= size.contentSize[1]){
        return [point[0] - size.contentSize[0],0];
        } else if(point[0] <= (size.viewSize[0] - size.contentSize[0]) &&  point[1] <= (size.viewSize[1] - size.contentSize[1])){
        return [point[0]+10, point[1]];
        } else {
        return [0,0]
        }
    }
    ...
}

2.在DataViz V5.3之后的版本,可在详细属性中加入appendToBody:true使得tooltip不会被自由块边缘截断。

  tooltip: {
    show: true,
    customizeTip: "",
    trigger: "axis",
    formatter: "",
    appendToBody: true,
    ...
  }

/var/www/html-133/wiki/data/pages/1.bi与可视化saca.dataviz/4图表/4.24tooltip悬浮框位置控制.txt · 最后更改: 2021/04/08 14:10 由 admin