如何配置双轴图的坐标轴刻度对齐？

Question

我在使用VChart图表时，请问下这两条横坐标左右的数据可以配置对齐吗？效果相当于两条坐标轴重叠。

Answer 1

解决方案 Solution

VChart中提供了这样的配置，如果你需要同步轴的范围使0值对齐，可以参考文档中的配置：https://visactor.io/vchart/option/barChart#axes-linear.sync.a...

通过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

Demo: https://codesandbox.io/s/dual-axis-zero-align-9y49w3?file=/sr...

相关文档 Quote

Axis option：https://visactor.io/vchart/option/barChart#axes-linear.sync.a...

github：https://github.com/VisActor/VChart