如何配置双轴图的坐标轴刻度对齐?-灵析社区

米小米会努力

我在使用VChart图表时,请问下这两条横坐标左右的数据可以配置对齐吗?效果相当于两条坐标轴重叠。 ![1280X1280 \(1\).PNG](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/a2d283dbbe56a304e3c1c4c5e4cec619.png)

阅读量:295

点赞量:13

问AI
解决方案 Solution VChart中提供了这样的配置,如果你需要同步轴的范围使0值对齐,可以参考文档中的配置:"https://visactor.io/vchart/option/barChart#axes-linear.sync.a..." (https://link.segmentfault.com/?enc=%2B9o4DiYvtTbx%2FySAFl7hYw%3D%3D.YMEQVQ2a%2BWZ8LtliYzU5g%2BU3h8Sr2lDe0X%2BZHIuFrAa4oVYZLZtiRgQmpiN5rjl9hqlCStdnzM3v25H534WTeAsnhHY7e%2Bpx8sakhuaQnJE%3D) 通过sync指定右轴向左轴对齐即可。需要注意的是:需要为左轴定义id,以便能够在其他轴中指定它。 代码示例 Code Example spec.axes = [{ orient: 'left', id: 'left_axis', seriesIndex: [0], }, { orient: 'right', seriesId: ['line'], gird: { visible: false, }, sync: { axisId: 'left_axis', zeroAlign: true } }, 结果展示 Results "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/28ef6283903517a2c9a17f3448ed4527.png) Demo: "https://codesandbox.io/s/dual-axis-zero-align-9y49w3?file=/sr..." (https://link.segmentfault.com/?enc=bhg8ERLOafAqrxtGpn31%2FA%3D%3D.0se4qY8p6wTgNM8g%2FWaM2CSDQYynxn4NOL3yCJCMKqj7mtabdNP%2F%2Frt7bwG%2BaP73r%2BggJg2hGcUxFSjhtW9VgnLGK%2BBFuV5A6jKNqlOpkhU%3D) 相关文档 Quote Axis option:"https://visactor.io/vchart/option/barChart#axes-linear.sync.a..." (https://link.segmentfault.com/?enc=XIVDZSbVsB6RTnfogJ%2BJHQ%3D%3D.ypSd5V5AjtlCN4clcm1hlxWm6AFa93WMfiJKZsnG06%2FPMS2lQ77EggzV%2FzOown4gDW4hKtd2O0WujVaJ22FjjkbU5kshRrx6fj1rIeOAU48%3D) github:"https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=zsvdon1e4GWsYbi21g69ww%3D%3D.D4PlGu5HkceHfewjFEf1JirVIXVq9JfgcV%2F9kqpUbKoMAY7Cd83%2BSuLLMT9eRZo7)