G2 5.1.18中柱状图X轴数据过多时(200条)，轴刻度间距怎么设置大点

[Lss0332]

问题描述

开发过程中需要写一份柱状图，大概有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();

预期行为

期望增大柱形宽度时，能配置增大刻度间距，让柱形完整显示出来

平台

• 操作系统: [Windows]
• 网页浏览器: [Google Chrome]
  VUE3中使用，G2版本5.1.18

屏幕截图或视频（可选）

未配置宽度的柱状图

配置宽度后重叠的柱状图

期望效果

补充说明（可选）

No response

[hustcc]

默认会自动 hide 一些，防止太密集：

如果你的 x 轴是日期类型的，那么可以 encode 数据的时候，改成日期 Date，而不是日期字符串.

encode('x', (d) => new Date(x.x_field))

[Lss0332]

需求要求全展示，所以无法用隐藏部分来解决；且X轴为无规律数据(公司名称)

[hustcc]

需求要求全展示，所以无法用隐藏部分来解决；且X轴为无规律数据(公司名称)

那期望是什么？

你试试加上 滚动条 试试看，数据量比较多，有需要保障每个条的宽度，似乎只能加滚动条了。

[Lss0332]

需求要求全展示，所以无法用隐藏部分来解决；且X轴为无规律数据(公司名称)

那期望是什么？

你试试加上 滚动条 试试看，数据量比较多，有需要保障每个条的宽度，似乎只能加滚动条了。

我上面发的代码和效果图是已经加了滚动条的了；
期望轴刻度的间距，可以自由调节大小（即解决柱形宽度调大后轴刻度的间距不增大带来的重叠问题，如截图里所示）

[pearmini]

期望增大柱形宽度时，能配置增大刻度间距，让柱形完整显示出来

两种方案：

• 增大图表高度：根据数据数量计算高度
• 使用滚动条，并且设置 ratio 配置:

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();