怎么设置柱状图柱子之间的距离为固定距离？paddingOuter 是什么意思？为什么范围是【0,1】？

[YY88Xu]

问题描述

怎么设置柱状图柱子之间的距离为固定距离？paddingOuter 好像不起作用，paddingOuter 的范围为啥是【0,1】是按照谁的百分比吗？根本没有对应的文档啊

重现链接

No response

重现步骤

import { Chart } from '@antv/g2';

const data = [
{ year: '1951 年', sales: 38 },
{ year: '1952 年', sales: 52 },
{ year: '1956 年', sales: 61 },
{ year: '1957 年', sales: 145 },
{ year: '1958 年', sales: 48 },
{ year: '1959 年', sales: 38 },
{ year: '1960 年', sales: 38 },
{ year: '1962 年', sales: 38 },
];

const chart = new Chart({
container: 'container',
autoFit: true,
});

chart.interval().data(data).encode('x', 'year')
.encode('y', 'sales')
.style('maxWidth', 40)
.style('minWidth', 40)
.interaction('elementHighlightByColor', { background: true })
.scale('x', { paddingOuter: 0.5 })
chart.render();

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[hustcc]

• paddingOuter 是整个柱形图区域的左右 padding。
• paddingInner 是每根柱子在划分区域的占比，比如 0.5 就是一半柱子，一半空白。

chart.interval()
  .data(data)
  .encode('x', 'year')
  .encode('y', 'sales')
  .scale('x', { paddingOuter: 0.1, paddingInner: 0.3 });

[YY88Xu]

@hustcc 试了没有用啊，怎么设置柱子是 40px 柱子之间是60 啊

[hustcc]

@hustcc 试了没有用啊，怎么设置柱子是 40px 柱子之间是60 啊

只能 0-1 百分比设置，按照像素的话，需要通过画布大小，数据数量，计算出这个百分比。

[YY88Xu]

@hustcc 产品是这么设计的，柱子宽40px，两个柱子之间距离是 60px，能显示下就显示，显示不下x轴就出现 scrollbar，这能做到吗？

[YY88Xu]

@hustcc 设置了 scrollbar，柱子是 40px，设置 .scale('x', { paddingInner: 0.4}) 不起作用