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

超、凢脫俗 2023-10-18 20:04 0阅读 0赞

## 场景 ##

官方花瓣图实例：

[http://antv.alipay.com/zh-cn/g2/3.x/demo/pie/pie-platelets.html][http_antv.alipay.com_zh-cn_g2_3.x_demo_pie_pie-platelets.html]

官方示例效果：

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

官方的提示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

官方示例代码：

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

##    实现 ##

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

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

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

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后面的部分是函数的返回值。左边的名字所对应的就是上面提示模板中相对应。

[http_antv.alipay.com_zh-cn_g2_3.x_demo_pie_pie-platelets.html]: http://antv.alipay.com/zh-cn/g2/3.x/demo/pie/pie-platelets.html
[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190619131501934.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190619131520544.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190619131551234.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70