feat(bar chart): make barGapInGroup percentage based on actual barWidth#3950
Merged
xuefei1313 merged 2 commits intoVisActor:feat(bar-chart)-make-barGapInGroup-percentage-based-on-actual-barWidth-#3950from May 14, 2025
Conversation
xiaoluoHe
approved these changes
May 12, 2025
xuefei1313
changed the base branch from
develop
to
feat(bar-chart)-make-barGapInGroup-percentage-based-on-actual-barWidth-#3950
xuefei1313
merged commit 4544730
into
VisActor:feat(bar-chart)-make-barGapInGroup-percentage-based-on-actual-barWidth-#3950
7 of 14 checks passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 This is a ...
🔗 Related issue link
closed #3660
🔗 Related PR link
🐞 Bugserver case id
💡 Background and solution
Background
在 VChart 的柱状图（Bar Chart）组件中，barGapInGroup 属性用于控制同一组内柱子之间的间距。这个属性支持绝对像素值和百分比值（如 '50%'）两种形式。在之前的实现中，当使用百分比值时，是基于 bandWidth（分配空间）计算的，而非基于柱子的实际宽度。
这带来了一个问题： barMaxWidth barMinWidth barWidth会导致barWidth≠bandWidth，柱子间距并不会随着实际柱宽的变化而等比例调整，导致视觉效果不一致。
solution
修改 _getPosition 方法中计算 gap 的逻辑，将百分比基准从 bandWidth 改为实际的 barWidth
修改前的效果：
修改后的效果：
📝 Changelog
会影响同一组内柱子之间的间距
☑️ Self-Check before Merge
🚀 Summary
copilot:summary
🔍 Walkthrough
copilot:walkthrough