图表添加自定义label布局 后报错 oo(...) is not a constructor

[xiao15934831580]

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: '

' + '' + '{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)', }, }, 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();

[visiky]

空的 label class 定义吗？建议继承基础的 label，或者补全 label render 方法

[xiao15934831580]

没有定义label，用的是自定义 Label 布局函数 ，加上之后就报错 oo(...) is not a constructor，不知道是怎么触发的

[DarrenPei]

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();

[visiky]

注册的是 label layout，使用方式如下：

label: {
   layout: {  type: 'YOUR_LABLE_LAYOUT'  }
}