IssueHuntantvis/G2
The issue has been closed
在同一个chart对象中，条形图第一次渲染需要滚动条，第二次不需要就把滚动条关闭，第二次会缺少数据 #4220
mrh-code-star posted onGitHub
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动条BUG</title>
</head>
<body>
<div id="container"></div>
<button onclick="t1()">test1</button>
<button onclick="t2()">test2</button>
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.2.7/dist/g2.min.js"></script>
</body>
<script>
const data1 = [
{ type: '汽车', value: 34 },
{ type: '建材家居', value: 85 },
{ type: '住宿旅游', value: 103 },
{ type: '交通运输与仓储邮政', value: 142 },
{ type: '建筑房地产', value: 251 },
{ type: '教育', value: 367 },
{ type: 'IT 通讯电子', value: 491 },
{ type: '社会公共管理', value: 672 },
{ type: '医疗卫生', value: 868 },
{ type: '金融保险', value: 1234 },
];
const data2 = [
{ type: '汽车', value: 34 },
{ type: '建材家居', value: 85 },
{ type: '住宿旅游', value: 103 },
{ type: '交通运输与仓储邮政', value: 142 },
];
const chart = new G2.Chart({
container: 'container',
autoFit: true,
height: 500,
});
function t1() {
test1(chart, data1)
}
function t2() {
test2(chart, data2)
}
function test1(chart, data) {
chart.clear()
chart.data(data);
chart.legend(false);
chart.coordinate().transpose();
chart
.interval()
.position('type*value')
.size(26)
.label('value', {
style: {
fill: '#8d8d8d',
},
offset: 10,
});
chart.interaction('element-active');
chart.option("scrollbar", {
type: 'vertical',
width: 16,
categorySize: 50
})
chart.render();
console.log(chart.filteredData);
}
function test2(chart, data) {
chart.clear()
chart.data(data);
chart.legend(false);
chart.coordinate().transpose();
chart
.interval()
.position('type*value')
.size(26)
.label('value', {
style: {
fill: '#8d8d8d',
},
offset: 10,
});
chart.interaction('element-active');
chart.option("scrollbar", false)
chart.render();
console.log(chart.filteredData)
}
</script>
</html>