Ant Design Charts custom prompt information, legend, text information

Ant Design Charts

Custom legend
legendClose legendlegend
: false;

Legend configuration parameters, layout type layout legend display position position

legend: {
  layout: 'horizontal',
  position: 'right'
}

Layout type layout
optional horizontal | vertical
legend layout mode. Provides horizontal and vertical layouts.

Legend display position position
Legend position, options: 'top', 'top-left', 'top-right', 'left', 'left-top', 'left-bottom', 'right', 'right-top ', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right'.

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Pie } from '@ant-design/plots';
const DemoPie = () => {
  const data = [
    {
      type: '分类一',
      value: 27,
    },
    {
      type: '分类二',
      value: 25,
    },
    {
      type: '分类三',
      value: 18,
    },
  ];
  const config = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
    legend: {
     position: 'bottom'
    },
  };
  return <Pie {...config} />;
};

ReactDOM.render(<DemoPie />, document.getElementById('container'));

Custom text label label
attribute name type introduction
type string When the user uses a custom label type, the specific type type needs to be declared, otherwise the default label type will be used for rendering (pie chart label supports `inner
offset number label offset
offsetX number label The offset distance relative to the data point in the X direction
offsetY number label The offset distance relative to the data point in the Y direction
content *string IGroup
style ShapeAttrs label Text graphic attribute style
autoRotate string Whether to automatically rotate, the default is true
rotate number text Rotation angle
labelLine null boolean
labelEmit boolean only takes effect for text in polar coordinates, indicating whether the text is displayed radially according to the angle, true means on, false means off
layout *'overlap' 'fixedOverlap'
position *'top' 'bottom'
animate boolean AnimateOption
formatter Function format function
autoHide boolean whether to automatically hide, default false

import
 React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Pie } from '@ant-design/plots';
const DemoPie = () => {
  const data = [
    {
      type: '分类一',
      value: 27,
    },
    {
      type: '分类二',
      value: 25,
    },
    {
      type: '分类三',
      value: 18,
    },
  ];
  const config = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
    label: {
       // 可手动配置 label 数据标签位置
       position: 'middle',
       // 'top', 'bottom', 'middle'
       // 可配置附加的布局方法
       layout: [
         // 柱形图数据标签位置自动调整
         {
           type: 'interval-adjust-position',
         }, // 数据标签防遮挡
         {
           type: 'interval-hide-overlap',
         }, // 数据标签文颜色自动调整
         {
           type: 'adjust-color',
         },
       ],
     },
  };
  return <Pie {...config} />;
};

ReactDOM.render(<DemoPie />, document.getElementById('container'));

The custom tooltip
specifies the fields displayed in the tooltip. By default, different charts have different default field lists. Use it together with formatter configuration for better results.

tooltip: {
  fields: ['想要显示的字段一般是data中的值或者x，y轴数据'],
}

Format tooltip item content

tooltip: {
  formatter: (item) => {
    return { name: item.type, value: item.value + '%' };
  },
}

Formatted output style itemTpl

import
 React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Pie } from '@ant-design/plots';
const DemoPie = () => {
  const data = [
    {
      type: '分类一',
      value: 27,
      percent：30,
    },
    {
      type: '分类二',
      value: 25,
      percent：30,
    },
    {
      type: '分类三',
      value: 18,
      percent：40,
    },
  ];
  const config = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
 	tooltip: {
        showTitle: false,//关闭标题
        fields: ['type', 'percent', 'value'],
        formatter: (item) => {
          return { type: item.type, percent: item.percent,value:item.value};
        },
        itemTpl: '<div><p class="g2-tooltip-item"><span style="background-color:{ 
        color};" class="g2-tooltip-marker"></span>{type}</p><p class="g2-tooltip-item"><span  class="g2-tooltip-marker"></span>{value}</p><p class="g2-tooltip-item"><span  class="g2-tooltip-marker"></span>{percent} %</p></div>'

      }
  };
  return <Pie {...config} />;
};

ReactDOM.render(<DemoPie />, document.getElementById('container'));