diff --git a/site/examples/component/legend/demo/meta.json b/site/examples/component/legend/demo/meta.json index b2063e8537..7627ab9dfb 100644 --- a/site/examples/component/legend/demo/meta.json +++ b/site/examples/component/legend/demo/meta.json @@ -27,6 +27,14 @@ "en": "Custom Legend" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mZFvTZtdBEUAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "symbol.ts", + "title": { + "zh": "自定义符号", + "en": "Custom Symbol" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*UM2yQKYXczEAAAAAAAAAAAAADmJ7AQ/original" } ] } diff --git a/site/examples/component/legend/demo/symbol.ts b/site/examples/component/legend/demo/symbol.ts new file mode 100644 index 0000000000..7de89a87cd --- /dev/null +++ b/site/examples/component/legend/demo/symbol.ts @@ -0,0 +1,55 @@ +import { Chart, register, type SymbolFactor } from '@antv/g2'; + +const customSquare = Object.assign>( + (x, y, r) => { + const radius = r / 2; + + return [ + ['M', x + radius, y - r], + ['L', x - radius, y - r], + ['A', radius, radius, 0, 0, 0, x - r, y - radius], + ['L', x - r, y + radius], + ['A', radius, radius, 0, 0, 0, x - radius, y + r], + ['L', x + radius, y + r], + ['A', radius, radius, 0, 0, 0, x + r, y + radius], + ['L', x + r, y - radius], + ['A', radius, radius, 0, 0, 0, x + radius, y - r], + ['Z'], + ]; + }, + { + // 空心请设置为 ['stroke', 'lineWidth'] + style: ['fill'] + }, +); + +register('symbol.customSquare', customSquare); + +const chart = new Chart({ + container: 'container', +}); + +const data = [ + { genre: 'Sports', sold: 275 }, + { genre: 'Strategy', sold: 115 }, + { genre: 'Action', sold: 120 }, + { genre: 'Shooter', sold: 350 }, + { genre: 'Other', sold: 150 }, +]; + +const colorField = 'genre'; + +chart + .interval() + .data(data) + .encode('x', 'genre') + .encode('y', 'sold') + .encode('color', colorField) + .legend({ + color: { + itemMarker: 'customSquare', + }, + }); + +chart.render(); +