VisActor / VisActor/VChart

[Feature] 支持线性 x 轴场景下的自动柱宽策略

Open
#4,615 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement vchart
Dominant language
TypeScript
Stars
1.8k
Forks
221
Avg merge
1d 6h
Merged PRs (30d)
26

Description

背景

当前柱系列在维度轴为 band 轴时,会基于轴的 bandwidth() 计算柱宽,并继续应用 barWidthbarMinWidthbarMaxWidthbarGapInGroup 等配置。

但当柱系列的定位轴为 linear x 轴,且没有配置 x2Field 时,线性轴本身不提供 getBandwidth,当前实现会回退到 DefaultBandWidth = 6。这能保证图表正常渲染,但不是真正的数据间距感知的自动柱宽策略。

相关代码路径:

  • packages/vchart/src/series/bar/bar.tsDefaultBandWidth = 6
  • packages/vchart/src/series/bar/bar.ts_getBarWidth 中通过 axisHelper.getBandwidth?.(...) ?? DefaultBandWidth 获取宽度基准
  • packages/vchart/src/series/bar/bar.tsinitLinearRectMarkStyle 中,linear x 且无 x2Field 时使用 x = dataToPosX - barWidth / 2width = _getBarWidth(...)
  • packages/vchart/src/component/axis/cartesian/interface/common.tsgetBandwidth 标注为 band 轴特有

当前行为

  1. band x 轴:默认柱宽随 bandWidth 自适应。
  2. linear x 轴 + x2Field:柱宽由 [x, x2] 映射后的像素区间决定,并支持 barGapbarMinWidth 等约束。
  3. linear x 轴 + 无 x2Field:默认柱宽固定回退为 6px;若配置百分比形式的 barWidth,百分比基准实际也是这个回退宽度。

需求

希望为 “linear x 轴 + 无 x2Field + 用户未显式配置 barWidth” 的柱系列提供更合理的自动柱宽策略,使柱宽能够根据当前可见数据点间距自适应,而不是固定 6px。

建议策略

可以考虑基于当前可见数据点映射到像素后的相邻间距计算宽度:

autoBarWidth = clamp(minPositiveSpacingPx * ratio, minWidth, maxWidth)

建议边界:

  • minPositiveSpacingPx 取当前可见数据中相邻 x 像素坐标的最小正间距,避免不等距数据下重叠。
  • ratio 可取 0.6 ~ 0.8,具体值可结合现有柱图视觉风格评估。
  • 仍尊重 barMinWidth / barMaxWidth
  • 如果无法从数据或布局推导有效间距,继续回退到现有 6px 行为。
  • 显式配置 barWidth 时不启用该自动策略,避免破坏用户明确设置。
  • 配置了 x2Field 的区间柱/直方图场景继续使用区间宽度逻辑,不纳入该策略。

验收标准

  • linear x 轴、无 x2Field、无显式 barWidth 时,柱宽能随可见数据点间距变化。
  • 显式 barWidthbarMinWidthbarMaxWidth 行为保持可预测。
  • x2Field 区间柱/直方图场景不受影响。
  • dataZoom / axis filter 等改变可见数据范围的场景下,自动宽度能重新计算或保持合理。
  • 增加覆盖 linear x 轴柱宽策略的单测或运行时用例。

备注

本需求来源于对现有实现的代码分析。当前 6px 回退是可工作的兼容兜底,但与文档里 barWidth 不配置时“默认自适应”的语义在 linear x 轴场景下不完全一致。

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/vchart/src/series/bar/bar.ts, tracing _getBarWidth and initLinearRectMarkStyle, then read the getBandwidth contract in packages/vchart/src/component/axis/cartesian/interface/common.ts. Verify how visible data coordinates and existing barMinWidth/barMaxWidth constraints are available before choosing the spacing calculation. Done means linear x bars without x2Field adapt to visible spacing, while explicit barWidth and interval-bar behavior remain unchanged, with unit or runtime coverage added.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.