G2Plot
G2Plot copied to clipboard
🐛 [BUG] When I set annotation's type as 'html' and then register an 'annotation:click' event on the chart, the callback can't be invoked.
🐛 Bug description [Please make everyone to understand it]
📷 Step to reproduce
import { Column } from '@antv/g2plot';
const data = [
{ type: '分类一', value: 27 },
{ type: '分类二', value: 25 },
{ type: '分类三', value: 18 },
{ type: '分类四', value: 15 },
{ type: '分类五', value: 10 },
{ type: '其他', value: 5 },
];
const plot = new Column('container', {
width: 400,
height: 300,
autoFit: false,
appendPadding: 0,
data,
yField: 'value',
xField: 'type',
label: false,
annotations: [
{
type: 'html',
html: `<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" transform="matrix(-1 0 0 1 16 0)" fill="white" fill-opacity="0.01"/>
<path d="M3.2856 12.7137C0.682103 10.1102 0.682103 5.88915 3.2856 3.28565C5.8891 0.682154 10.1102 0.682154 12.7137 3.28565C15.3172 5.88915 15.3172 10.1102 12.7137 12.7137C12.0745 13.3529 11.3379 13.8351 10.5516 14.1605C10.1457 14.3284 9.72648 14.4546 9.30064 14.5389C9.15773 14.5672 8.72407 15.2159 7.99964 16.485C7.27521 15.2159 6.84157 14.5672 6.69864 14.5389C6.27282 14.4546 5.85362 14.3284 5.44767 14.1605C4.66142 13.8351 3.92475 13.3529 3.2856 12.7137Z" fill="#2563F4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0769 7C10.5671 7 10.1538 7.41323 10.1538 7.92308C10.1538 8.43292 10.5671 8.84615 11.0769 8.84615C11.5868 8.84615 12 8.43292 12 7.92308C12 7.41323 11.5868 7 11.0769 7ZM8 7C7.49015 7 7.07692 7.41323 7.07692 7.92308C7.07692 8.43292 7.49015 8.84615 8 8.84615C8.50985 8.84615 8.92308 8.43292 8.92308 7.92308C8.92308 7.41323 8.50985 7 8 7ZM4 7.92308C4 7.41323 4.41323 7 4.92308 7C5.43292 7 5.84615 7.41323 5.84615 7.92308C5.84615 8.43292 5.43292 8.84615 4.92308 8.84615C4.41323 8.84615 4 8.43292 4 7.92308Z" fill="#D0DEFF"/>
</svg>`,
/** 位置 */
// ✅ 3. 支持回调设置,转换为百分比例。yScale 有多个,需要获取到具体 y轴字段对应的 scale
position: ['分类三', 25],
},
],
});
plot.on('annotation:click', () => {
console.log('sdsd');
});
plot.render();
If you click the annotation that rendered with svg, the console hasn't any output.
🏞 Expected result
🚑 Any additional [like screenshots]
- G2Plot Version: 2.4.25
- Platform: macOS