antvis/G2

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

YY88Xu posted onGitHub

问题描述

<img width="1243" alt="image" src="https://github.com/antvis/G2/assets/14836228/37a07639-37d0-4e6c-bb8a-5d043f4d9cf9"> 怎么设置柱状图柱子之间的距离为固定距离?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


  • paddingOuter 是整个柱形图区域的左右 padding。
  • paddingInner 是每根柱子在划分区域的占比,比如 0.5 就是一半柱子,一半空白。
chart.interval()
  .data(data)
  .encode('x', 'year')
  .encode('y', 'sales')
  .scale('x', { paddingOuter: 0.1, paddingInner: 0.3 });
posted by hustcc about 1 year ago

@hustcc 试了没有用啊,怎么设置柱子是 40px 柱子之间是60 啊 <img width="1150" alt="image" src="https://github.com/antvis/G2/assets/14836228/950720b7-4862-4db1-992a-f8e6bf30aed9">

posted by YY88Xu about 1 year ago

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

<img width="1150" alt="image" src="https://github.com/antvis/G2/assets/14836228/950720b7-4862-4db1-992a-f8e6bf30aed9">

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

posted by hustcc about 1 year ago

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

posted by YY88Xu about 1 year ago

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

posted by YY88Xu about 1 year ago

Fund this Issue

$0.00
Funded

Pull requests