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中的饼状图中的花瓣图旁边的文字显