Open lcldyh opened 3 months ago
https://g2.antv.antgroup.com/zh/examples/composition/space#space-layer
import { Chart } from '@antv/g2'; const chart = new Chart({ container: 'container', }); const scaleColor = (node) => node.scale('color', { palette: 'cool', offset: (t) => t * 0.8 + 0.1, }); const layer = chart.spaceLayer().data({ type: 'fetch', value: 'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv', format: 'csv', }); layer .interval() .transform({ type: 'sortX', reverse: true, by: 'y' }) .encode('x', 'letter') .encode('y', 'frequency') .encode('color', 'letter') .call(scaleColor); layer .interval() .attr('x', 300) .attr('y', 50) .attr('width', 300) .attr('height', 300) .coordinate({ type: 'theta' }) .transform({ type: 'stackY' }) .legend(false) .scale('color', { palette: 'cool', offset: (t) => t * 0.8 + 0.1, }) .encode('y', 'frequency') .encode('color', 'letter') .call(scaleColor); chart.render();
并且使用 legend:filte 交互的时候会把所有的 legend 都干没了;
legend:filte
chart.emit('legend:filter', { data: { channel: 'color', values: ['Sports', 'Strategy'] }, });
https://g2.antv.antgroup.com/zh/examples/composition/space#space-layer