AntV中的饼状图中的花瓣图中的ToolTip怎样修改

最新推荐文章于 2024-07-16 10:48:38 发布

霸道流氓气质

最新推荐文章于 2024-07-16 10:48:38 发布

阅读量1.4k

点赞数

分类专栏：前端那些骚操作文章标签： Tooltip

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92827447

版权

前端那些骚操作专栏收录该内容

470 篇文章 16 订阅

订阅专栏

场景

官方花瓣图实例：

http://antv.alipay.com/zh-cn/g2/3.x/demo/pie/pie-platelets.html

官方示例效果：

官方的提示：

官方示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <metaname="viewport"content="width=device-width,height=device-height">
    <title>饼图-花瓣图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script>
  var data = [{
    type: '分类一',
    value: 27
  }, {
    type: '分类二',
    value: 25
  }, {
    type: '分类三',
    value: 18
  }, {
    type: '分类四',
    value: 15
  }, {
    type: '分类五',
    value: 10
  }, {
    type: 'Other',
    value: 5
  }];

  // 根据比例，获取两点之间的点
  function getPoint(p0, p1, ratio) {
    return {
      x: (1 - ratio) * p0.x + ratio * p1.x,
      y: (1 - ratio) * p0.y + ratio * p1.y
    };
  }

  var pointRatio = 0.7; // 设置开始变成圆弧的位置 0.7
  // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
  var sliceNumber = 0.005;

  // 自定义 other 的图形，增加两条线
  G2.Shape.registerShape('interval', 'platelet', {
    draw: function draw(cfg, container) {
      cfg.points[1].y = cfg.points[1].y - sliceNumber;
      cfg.points[2].y = cfg.points[2].y - sliceNumber;
      var centerPoint = {
        x: cfg.points[3].x,
        y: (cfg.points[2].y + cfg.points[3].y) / 2
      };
      centerPoint = this.parsePoint(centerPoint);
      var points = this.parsePoints(cfg.points);
      var path = [];
      var tmpPoint1 = getPoint(points[0], points[3], pointRatio);
      var tmpPoint2 = getPoint(points[1], points[2], pointRatio);
      path.push(['M', points[0].x, points[0].y]);
      path.push(['L', tmpPoint1.x, tmpPoint1.y]);
      path.push(['Q', points[3].x, points[3].y, centerPoint.x, centerPoint.y]);
      path.push(['Q', points[2].x, points[2].y, tmpPoint2.x, tmpPoint2.y]);
      path.push(['L', points[1].x, points[1].y]);
      path.push(['z']);
      return container.addShape('path', {
        attrs: {
          fill: cfg.color,
          path: path
        }
      });
    }
  });

  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [40, 0]
  });

  chart.source(data);
  chart.coord('theta');
  chart.intervalStack().position('value').color('type').shape('platelet').label('type');

  chart.render();
</script>
</body>
</html>

实现

现在要修改为具体的业务需求的类型，如下:

首先在设置数据源的地方添加百分比属性

 var data = [{
                    type: names1[0],
                    value:values1[0],
                    percent:values1[0]/(values1[0]+values1[1]+values1[2]+values1[3])
                }, {
                    type: names1[1],
                    value:values1[1],
                    percent:values1[1]/(values1[0]+values1[1]+values1[2]+values1[3])
                }, {
                    type: names1[2],
                    value:values1[2],
                    percent:values1[2]/(values1[0]+values1[1]+values1[2]+values1[3])
                }, {
                    type: names1[3],
                    value:values1[3],
                    percent:values1[3]/(values1[0]+values1[1]+values1[2]+values1[3])
                }
                ];

然后设置数据源时格式化百分比属性

chart.source(data, {
                    percent: {
                        formatter: function formatter(val) {
                            val = val * 100 + '%';
                            return val;
                        }
                    }});

设置提示的内容与格式

chart.tooltip({
                    showTitle: false,//关闭标题
                    itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type}({value}): {percent}</li>'
                });

给提示内容赋值

上面的提示内容的模板中的>{type}({value}): {percent}值的来源是：

chart.intervalStack().position('value').color('type').shape('platelet')
                .tooltip('type*percent*value', function(type, percent,value) {
                    percent = percent * 100 + '%';
                    return {
                        type: type,
                        percent: percent,
                        value:value
                    };
                });

注：

1.'type*percent*value'是相当于给后面的方法传递参数。

2.return后面的部分是函数的返回值。左边的名字所对应的就是上面提示模板中相对应。