下面的线图中,连续轴的刻度范围比实际数据的范围大比较多,可以通过配置,让刻度的范围更加接近数据的范围吗?
解决方案
连续轴的刻度算法是根据一些列规则计算而来的,其中轴刻度范围和实际数据的范围也是衡量指标之一,如果还需要进一步优化轴刻度的范围,有两个优化点:
- 刻度可以通过
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
}]
};