当数据全为0时，如何配置x轴的位置？

Question

类似于（https://www.visactor.io/vchart/demo/line-chart/basic-line）这样的全为0数据的折线图， x 轴的位置将以折线为中心。我想调整X轴的位置，使X轴与Y刻度0对齐。如何实现？

Answer 1

解决方案

不同的图表库有不同的解决方案。根据你给出的demo，你只需要将Y轴的

axes-linear.zero

设置为

true

即可。

• barChart-axes-linear.zero = true

  仅在轴为线性轴时有效，是否包含0值。当配置了min和max后，该配置项失效。

代码示例

const spec = {
  type: 'line',
  data: {
    values: [
      {
        time: '2:00',
        value: 0
      },
      {
        time: '4:00',
        value: 0
      },
      {
        time: '6:00',
        value: 0
      },
      {
        time: '8:00',
        value: 0
      },
      {
        time: '10:00',
        value: 0
      },
      {
        time: '12:00',
        value: 0
      },
      {
        time: '14:00',
        value: 0
      },
      {
        time: '16:00',
        value: 0
      },
      {
        time: '18:00',
        value: 0
      }
    ]
  },
  xField: 'time',
  yField: 'value',
  axes:[
    {
      orient: 'left',
      zero: true,
    }
]
};

结果

在线演示：https://codesandbox.io/s/data-is-all-0-smhq6h

相关文档

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

坐标轴教程：https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Axes

相关API：https://www.visactor.io/vchart/option/lineChart-axes-linear#zero

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