如何自定义轴label显示间距？

Question

类似 （https://visactor.io/vchart/demo/line-chart/basic-line）这样的折线图，想要实现自定义轴label的显示间距，该如何实现？

Answer 1

不同图表库的解决方案不一样，根据你给的demo，在VChart中只需要配置axes 中对应轴的label相关配置:通过minGap可以自定义标签之间的最小间距（单位为像素）。仅当轴采样开始时生效（sampling: true）。 该配置会影响轴采样的结果。

代码示例

Code Exampleconst 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
      }
  }]
};

结果展示 Results在线效果参考：https://codesandbox.io/s/customize-axis-label-spacing-9ml6nvO...

相关文档

基础折线图demo：https://www.visactor.io/vchart/demo/line-chart/basic-line
折线图教程：https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Type...
相关api：https://www.visactor.io/vchart/option/lineChart#axes-band.lab...
github：https://github.com/VisActor/VChart