You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

LightningChart 4.0.2:能否设置Y轴宽度以对齐双图表?

LightningChart 图表对齐解决方案(v4.0.2)

方法1:固定Y轴标签宽度

可以强制设置Y轴标签的固定宽度,避免数值长度(比如负数)导致轴宽变化。即使隐藏第二个图表的Y轴,也需要给该轴设置相同的标签宽度,确保布局空间一致。

代码示例:

// 配置第一个图表的Y轴
const axisY1 = chart1.getDefaultAxisY()
axisY1.setLabelAutoFit(false) // 关闭自动适配
axisY1.setLabelWidth(80) // 设置固定宽度,按需调整数值

// 配置第二个图表的Y轴(隐藏但保留宽度)
const axisY2 = chart2.getDefaultAxisY()
axisY2.setVisible(false)
axisY2.setLabelAutoFit(false)
axisY2.setLabelWidth(80)
axisY2.setTickMarkerVisible(false) // 隐藏刻度线,优化视觉效果

方法2:共享Y轴容器(推荐方案)

利用LightningChart的轴容器共享功能,让两个图表的Y轴共用同一个布局容器,自动保持宽度一致,无需手动计算数值。

代码示例:

// 创建共享的Y轴容器
const sharedYAxisContainer = lightningChart().AxisContainer()

// 初始化两个图表时绑定共享容器
const chart1 = lightningChart().ChartXY({
    container: 'chart1-container',
    axisY: sharedYAxisContainer
})

const chart2 = lightningChart().ChartXY({
    container: 'chart2-container',
    axisY: sharedYAxisContainer
})

这种方式下,无论轴上数值长度如何变化,两个图表的Y轴宽度都会自动同步,实现完美对齐。

方法3:统一图表左侧边距

直接给两个图表设置相同的左侧边距,强制对齐图表主体区域。这种方式操作简单,但需要根据轴标签的最大长度预估合适的边距值。

代码示例:

chart1.setMarginLeft(100)
chart2.setMarginLeft(100)

内容的提问来源于stack exchange,提问作者冷汐柠

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.22 17:27:12