VChart连续轴的刻度范围可以通过配置尽量的贴近数据范围吗

62 阅读1分钟

下面的线图中,连续轴的刻度范围比实际数据的范围大比较多,可以通过配置,让刻度的范围更加接近数据的范围吗?

解决方案

连续轴的刻度算法是根据一些列规则计算而来的,其中轴刻度范围和实际数据的范围也是衡量指标之一,如果还需要进一步优化轴刻度的范围,有两个优化点:

  • 刻度可以通过zero: false调整为不强制从0开始
  • 刻度算法可以考虑切换成d3的算法,d3刻度算法在保证数据范围上更好
axes: [{
    orient: 'left',
    tick: {
      tickMode: 'd3'
    },
    zero: false
  }]

代码示例

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: 'left',
    tick: {
      tickMode: 'd3'
    },
    zero: false
  }]
};

结果展示

相关文档