Shape.registerShape('interval', 'triangle', {
getPoints: function(cfg) {
{ x: x - width / 2, y: y0 },
{ x: x + width / 2, y: y0 }
draw: function(cfg, group) {
const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
const polygon = group.addShape('polygon', {
{ x:points[0].x, y:points[0].y },
{ x:points[1].x, y:points[1].y },
{ x:points[2].x, y:points[2].y }
return polygon; // 将自定义Shape返回
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
const chart = new F2.Chart({
pixelRatio: window.devicePixelRatio
chart.interval().position('genre*sold').color('genre').shape('triangle');