AntV中的饼状图中的花瓣图中的ToolTip怎样修改
生活随笔
收集整理的这篇文章主要介绍了
AntV中的饼状图中的花瓣图中的ToolTip怎样修改
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
场景
官方花瓣图实例：
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后面的部分是函数的返回值。左边的名字所对应的就是上面提示模板中相对应。
总结
以上是生活随笔为你收集整理的AntV中的饼状图中的花瓣图中的ToolTip怎样修改的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： AntV的花瓣图中鼠标悬浮提示信息去掉与
- 下一篇： AntV中的饼状图中的花瓣图旁边的文字显