Closed xiao15934831580 closed 4 years ago
空的 label class 定义吗?建议继承基础的 label,或者补全 label render 方法
没有定义label,用的是自定义 Label 布局函数 ,加上之后就报错 oo(...) is not a constructor,不知道是怎么触发的
1、参照官网API修改,注意layout关键字位置,结果代码见末尾
//https://g2.antv.vision/zh/docs/manual/developer/registerlabel
chart
.interval()
.adjust('stack')
.position('value')
.color('type')
.shape('slice-shape')
.label('type', {
layout: {
type: 'limit-in-shape',
},
});
2、layoutLbale 规范写为layoutLabel
import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';
import {registerGeometryLabelLayout, registerGeometryLabel } from '@antv/g2';
function layoutLabel(items, labels, shapes , region) {
}
registerGeometryLabelLayout('layoutLabel', layoutLabel);
const data = [
{ action: '浏览网站', pv: 50000 },
{ action: '放入购物车', pv: 35000 },
{ action: '生成订单', pv: 25000 },
{ action: '支付订单', pv: 15000 },
{ action: '完成交易', pv: 8000 },
];
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'map',
callback(row) {
row.action = row.action;
row.pv = row.pv;
row.percent = row.pv / 50000;
return row;
},
});
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
padding: [20, 120, 95],
});
chart.data(dv.rows);
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('action*percent')
.shape('funnel')
.color('action', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF'])
.label('action*pv', {
offset: 35,
labelLine: {
style:{
lineWidth: 1,
stroke: 'rgba(0,0,0,0.15',
},
},
formatter: (action, pv) => {
return action + ' ' + pv;
},
layout: {
type: 'layoutLabel',
},
})
.tooltip('action*pv*percent', (action, pv, percent) => {
return {
name: action,
percent: +percent * 100 + '%',
pv: 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();
注册的是 label layout,使用方式如下:
label: {
layout: { type: 'YOUR_LABLE_LAYOUT' }
}
import DataSet from '@antv/data-set'; import { Chart } from '@antv/g2'; import {registerGeometryLabelLayout, registerGeometryLabel } from '@antv/g2'; const { DataView } = DataSet; function layoutLbale(items, labels, shapes , region) { } registerGeometryLabelLayout('layoutLbale', layoutLbale); const dv = new DataView().source([ { action: '浏览网站', pv: 50000 }, { action: '放入购物车', pv: 35000 }, { action: '生成订单', pv: 25000 }, { action: '支付订单', pv: 15000 }, { action: '完成交易', pv: 8000 }, ]); 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: '
' + '浏览人数:{pv}
' + '占比:{percent}
' + '
${action} ${pv}
, }; }, { offset: 35, labelLine: { style: { lineWidth: 1, stroke: 'rgba(0, 0, 0, 0.15)', }, }, type:'layoutLbale' } ) .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();