Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛[BUG] @ant-design/plots react 1.2.5版本柱状图显示问题 #2784

Open
Gray-wl opened this issue Nov 26, 2024 · 0 comments
Open

🐛[BUG] @ant-design/plots react 1.2.5版本柱状图显示问题 #2784

Gray-wl opened this issue Nov 26, 2024 · 0 comments

Comments

@Gray-wl
Copy link

Gray-wl commented Nov 26, 2024

🐛 bug 描述 [详细地描述 bug,让大家都能理解]

Column柱状图在将xAxis设置为label: { autoRotate: true }时,在改变浏览器宽度的时候,当浏览器宽度拉到某个点时会出现label显示不全的情况。

📷 复现步骤 [清晰描述复现步骤,让别人也能看到问题]

1、将label的文本设置的长点
2、柱状图的宽度自适应
3、放大或缩小浏览器,或者拉动浏览器的大小改变其宽度
4、会在某个点出现x轴的label倾斜并未完成显示
5、当再改变浏览器宽度后,它会提高柱状图的显示区然后显示全label文本

🏞 期望结果 [描述你原本期望看到的结果]

在xAxis设置为label: { autoRotate: true }时,无论浏览器的宽度是多少,都要让其显示全label

💻 复现代码 [提供可复现的代码,仓库,或线上示例]

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';

const DemoColumn = () => {
const data = [
{
type: '家具家电',
sales: 38,
},
{
type: '粮油副食',
sales: 52,
},
{
type: '生鲜水果',
sales: 61,
},
{
type: '美容洗护',
sales: 145,
},
{
type: '母婴用品',
sales: 48,
},
{
type: '进口食品',
sales: 38,
},
{
type: '食品饮料',
sales: 38,
},
{
type: '家庭清洁',
sales: 38,
},
];
const config = {
data,
xField: 'type',
yField: 'sales',
label: {
// 可手动配置 label 数据标签位置
position: 'middle',
// 'top', 'bottom', 'middle',
// 配置样式
style: {
fill: '#FFFFFF',
opacity: 0.6,
},
},
xAxis: {
label: {
autoHide: false,
autoRotate: true,
},
},
meta: {
type: {
alias: '类别',
},
sales: {
alias: '销售额',
},
},
};
return <Column {...config} />;
};

ReactDOM.render(, document.getElementById('container'));

© 版本信息

  • ant-design-charts 版本: 1.2.5
  • 浏览器环境 chrome
  • 开发环境 mac OS

🚑 其他信息 [如截图等其他信息可以贴在这里]

异常图片:
image

正常图片:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant