antvis/G2
posted by pearmini over 1 year ago
The issue has been closed
去掉分面图的 frame,并且自定义样式 #5644
pearmini posted onGitHub
咨询下 重复矩阵的每个分面的那个黑框样式可以定制么 我没找到相关的api
可以先设置 frame:false,然后通过 point.viewStyle 的 plotFill ,plotStroke 等设置
import { Chart } from '@antv/g2';
const toNaN = (d) => (d === 'NaN' ? NaN : d);
const chart = new Chart({
container: 'container',
width: 800,
height: 800,
paddingLeft: 70,
paddingBottom: 70,
});
const repeatMatrix = chart
.repeatMatrix()
.data({
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/penguins.json',
transform: [
{
type: 'map',
callback: ({
culmen_depth_mm: cdepth,
culmen_length_mm: clength,
flipper_length_mm: flength,
body_mass_g: bmass,
...d
}) => ({
...d,
culmen_depth_mm: toNaN(cdepth),
culmen_length_mm: toNaN(clength),
flipper_length_mm: toNaN(flength),
body_mass_g: toNaN(bmass),
}),
},
],
})
.encode('position', ['culmen_length_mm', 'culmen_depth_mm']);
repeatMatrix
.point()
.attr('frame', false)
.encode('color', 'species')
.viewStyle('plotStroke', '#aaa')
.viewStyle('plotOpacity', 0.5);
chart.render();