漏斗图中占比文字不能居中显示

import DataSet from '@antv/data-set'; import { Chart } from '@antv/g2';

const { DataView } = DataSet; const dv = new DataView().source([ { action: '浏览网站', pv: 8000 }, { action: '放入购物车', pv: 5000 }, { action: '生成订单', pv: 2500 }, { action: '支付订单', pv: 2000 }, { action: '完成交易', pv: 1000 }, ]); dv.transform({ type: 'map', callback(row) { row.percent = row.pv / 50000; return row; }, }); const data = dv.rows; const chart = new Chart({ container: 'container', autoFit: true, height: 500, padding: [20, 120, 95], }); chart.data(data); chart.axis(false); chart.tooltip({ showTitle: false, showMarkers: false, itemTpl: '

' + '' + '{name}
' + '浏览人数：{pv}
' + '占比：{percent}
' + '

', }); chart .coordinate('rect') .transpose() .scale(1, -1); chart .interval() .adjust('symmetric') .position('actionpercent') .shape('funnel') .color('action', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF']) .label( 'actionpv', (action, pv) => { return { content: ${action} ${pv}, }; }, { offset: 35, labelLine: { style: { lineWidth: 1, stroke: 'rgba(0, 0, 0, 0.15)', }, }, } ) .tooltip('actionpvpercent', (action, pv, percent) => { return { name: action, percent: +percent * 100 + '%', pv, }; }) .animate({ appear: { animation: 'fade-in' }, update: { annotation: 'fade-in' } });

chart.interaction('element-active');

chart.on('beforepaint', () => { chart.annotation().clear(true); const chartData = chart.getData(); // 中间标签文本 chartData.forEach((obj) => { chart.annotation().text({ top: true, position: { action: obj.action, percent: 'median', }, content: +obj.percent * 100 + '%', // 显示的文本内容 style: { stroke: null, fill: '#fff', textAlign: 'center', }, }); }); });

chart.render();

antvis / G2

漏斗图中占比文字不能居中显示 #3400