We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
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'));
异常图片:
正常图片:
The text was updated successfully, but these errors were encountered:
No branches or pull requests
🐛 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'));
© 版本信息
🚑 其他信息 [如截图等其他信息可以贴在这里]
异常图片:
正常图片:
The text was updated successfully, but these errors were encountered: