Ant Design Charts
自定义图例 legend
关闭图例
legend: false;
图例配置参数,布局类型 layout 图例展示位置 position
legend: {
layout: 'horizontal',
position: 'right'
}
布局类型 layout
optional horizontal | vertical
图例布局方式。提供横向布局和纵向布局。
图例展示位置 position
图例位置,可选项:‘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'));
自定义文本标签 label
属性名 类型 介绍
type string 当用户使用了自定义的 label 类型,需要声明具体的 type 类型,否则会使用默认的 label 类型渲染(饼图 label 支持 `inner
offset number label 的偏移量
offsetX number label 相对于数据点在 X 方向的偏移距离
offsetY number label 相对于数据点在 Y 方向的偏移距离
content *string IGroup
style ShapeAttrs label 文本图形属性样式
autoRotate string 是否自动旋转,默认 true
rotate number 文本旋转角度
labelLine null boolean
labelEmit boolean 只对极坐标下的文本生效,表示文本是否按照角度进行放射状显示,true 表示开启,false 表示关闭
layout *‘overlap’ ‘fixedOverlap’
position *‘top’ ‘bottom’
animate boolean AnimateOption
formatter Function 格式化函数
autoHide boolean 是否自动隐藏,默认 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'));
自定义提示信息 tooltip
指定 tooltip 中显示的字段,默认不同图表有不同的默认字段列表。配合 formatter 配置一起使用,效果更佳。
tooltip: {
fields: ['想要显示的字段一般是data中的值或者x,y轴数据'],
}
格式化 tooltip item 内容文章来源:https://www.toymoban.com/news/detail-673468.html
tooltip: {
formatter: (item) => {
return { name: item.type, value: item.value + '%' };
},
}
格式化 输出样式 itemTpl文章来源地址https://www.toymoban.com/news/detail-673468.html
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'));
到了这里,关于Ant Design Charts 自定义提示信息、图例、文本信息的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!