-
Notifications
You must be signed in to change notification settings - Fork 1.6k
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
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
G2 5.1.18中柱状图X轴数据过多时(200条),轴刻度间距怎么设置大点 #6175
Comments
需求要求全展示,所以无法用隐藏部分来解决;且X轴为无规律数据(公司名称) |
那期望是什么? 你试试加上 滚动条 试试看,数据量比较多,有需要保障每个条的宽度,似乎只能加滚动条了。 |
我上面发的代码和效果图是已经加了滚动条的了; |
两种方案:
import { Chart } from "@antv/g2";
const chart = new Chart({ container: "container" });
chart.options({
type: "interval",
data: [
{ letter: "A", frequency: 0.08167 },
{ letter: "B", frequency: 0.01492 },
{ letter: "C", frequency: 0.02782 },
{ letter: "D", frequency: 0.04253 },
{ letter: "E", frequency: 0.12702 },
{ letter: "F", frequency: 0.02288 },
{ letter: "G", frequency: 0.02015 },
{ letter: "H", frequency: 0.06094 },
{ letter: "I", frequency: 0.06966 },
{ letter: "J", frequency: 0.00153 },
{ letter: "K", frequency: 0.00772 },
{ letter: "L", frequency: 0.04025 },
{ letter: "M", frequency: 0.02406 },
{ letter: "N", frequency: 0.06749 },
{ letter: "O", frequency: 0.07507 },
{ letter: "P", frequency: 0.01929 },
{ letter: "Q", frequency: 0.00095 },
{ letter: "R", frequency: 0.05987 },
{ letter: "S", frequency: 0.06327 },
{ letter: "T", frequency: 0.09056 },
{ letter: "U", frequency: 0.02758 },
{ letter: "V", frequency: 0.00978 },
{ letter: "W", frequency: 0.0236 },
{ letter: "X", frequency: 0.0015 },
{ letter: "Y", frequency: 0.01974 },
{ letter: "Z", frequency: 0.00074 },
],
encode: { x: "letter", y: "frequency" },
scrollbar: { x: { ratio: 0.1 } },
});
chart.render(); |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
问题描述
开发过程中需要写一份柱状图,大概有200条无规律数据。由于数据多,柱形显得很窄并图表溢出;所以对X轴设置了scrollbar,并在样式中设置了柱形的宽(增大);在增大柱形的宽后,X轴的刻度间距没有自动增大,导致了所有柱形都叠在了一起。
重现链接
No response
重现步骤
const chart = new Chart({
container: 'container',
height: 380,
autoFit: true,
renderer: new GRenderer(),
});
chart
.interval()
.coordinate({
transform: [
{ type: 'transpose' },
]
})
.data(moduleList[0].table)
.encode('x', 'name')
.encode('y', '一次成品合格率')
.axis('x', {
title: false,
})
.axis('y', {
title: false,
})
.style({
'fill': '#599bd4',
'minWidth': 20,
'maxWidth': 20
})
.scrollbar('x', {})
.scale('x', {
padding: 0.5,
});
chart.render();
预期行为
期望增大柱形宽度时,能配置增大刻度间距,让柱形完整显示出来
平台
VUE3中使用,G2版本5.1.18
屏幕截图或视频(可选)
未配置宽度的柱状图
配置宽度后重叠的柱状图
期望效果
补充说明(可选)
No response
The text was updated successfully, but these errors were encountered: