如何自定义轴标签显示间距？

Question

当我使用 VChart 图表时，我创建了一个折线图，如 (https://visactor.io/vchart/demo/line-chart/basic-line), 我觉得折线图底部的轴太密集了。我希望在显示过程中轴标签之间有更大的间隙，以使读者更舒适。所以我希望实现可以自定义轴上标签间距的功能

如何实现自定义轴标签的显示间距？

Answer 1

解决方案

解决方案因所使用的图表库而异。根据提供的演示，您只需将相应字段设置为 false 即可禁用堆叠。

• MinGap 

  可用于自定义标签之间的最小间距（单位：像素）。仅在轴采样开始时生效 (

  sampling: true

  )。此配置会影响轴采样的结果。

代码示例

const spec = {
  type: 'line',
  data: {
    values: [
      {
        time: '2:00',
        value: 8
      },
      {
        time: '4:00',
        value: 9
      },
      {
        time: '6:00',
        value: 11
      },
      {
        time: '8:00',
        value: 14
      },
      {
        time: '10:00',
        value: 16
      },
      {
        time: '12:00',
        value: 17
      },
      {
        time: '14:00',
        value: 17
      },
      {
        time: '16:00',
        value: 16
      },
      {
        time: '18:00',
        value: 15
      }
    ]
  },
  xField: 'time',
  yField: 'value',
  axes: [{
      orient: "bottom",
      label: {
          minGap: 80
      }
  }]
};

结果

在线演示：https://codesandbox.io/s/customize-axis-label-spacing-9ml6nv

相关文档

基本折线图演示：https://www.visactor.io/vchart/demo/line-chart/basic-line

折线图教程：https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Types/Line

相关api：https://www.visactor.io/vchart/option/lineChart#axes-band.label.minGap

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