简单条形图y轴刻度设置最小值,图形渲染异常
Closed this issue · 1 comments
Calmio-Y commented
问题描述
import { Chart } from '@antv/g2';
const data = [
{ year: '1951 年', sales: 38 },
{ year: '1952 年', sales: 52 },
{ year: '1956 年', sales: 61 },
{ year: '1957 年', sales: 145 },
{ year: '1958 年', sales: 48 },
{ year: '1959 年', sales: 38 },
{ year: '1960 年', sales: 38 },
{ year: '1962 年', sales: 38 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart
.interval()
.coordinate({ transform: [{ type: 'transpose' }] })
.data(data)
.encode('x', 'year')
.encode('y', 'sales')
.scale("y", {
domainMin: 30,
nice: true,
})
chart.render();
重现链接
No response
重现步骤
No response
预期行为
设置刻度最值时,图形正常渲染
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
屏幕截图或视频(可选)
补充说明(可选)
No response
pearmini commented
这个需要设置 chart 的 clip 属性去裁剪超出的部分:
import { Chart } from '@antv/g2';
const data = [
{ year: '1951 年', sales: 38 },
{ year: '1952 年', sales: 52 },
{ year: '1956 年', sales: 61 },
{ year: '1957 年', sales: 145 },
{ year: '1958 年', sales: 48 },
{ year: '1959 年', sales: 38 },
{ year: '1960 年', sales: 38 },
{ year: '1962 年', sales: 38 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
clip: true,
});
chart
.interval()
.coordinate({ transform: [{ type: 'transpose' }] })
.data(data)
.encode('x', 'year')
.encode('y', 'sales')
.scale('y', {
domainMin: 30,
nice: true,
});
chart.render();