Description
Describe the bug / 问题描述
import { Chart } from '@antv/g2';
const chart = new Chart({ container: 'container', height: 350 });
const shapeList = ['bowtie', 'smooth', 'hv', 'rect', 'hollowPoint'];
const data = [
{ genre: 'Sports', sold: 50 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
{ genre: 'Sp34orts', sold: 50 },
{ genre: 'Stra2tegy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shoo5ter', sold: 350 },
{ genre: 'Othe4r', sold: 150 },
{ genre: 'Sports', sold: 50 },
{ genre: 'Strat22egy', sold: 115 },
{ genre: 'Acti2on', sold: 120 },
{ genre: 'Sho23oter', sold: 350 },
{ genre: 'Oth3er', sold: 150 },
{ genre: 'S35ports', sold: 50 },
{ genre: 'Strat44egy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Othe5r', sold: 150 },
{ genre: 'S8ports', sold: 50 },
{ genre: 'Str7ategy', sold: 115 },
{ genre: 'Act7ion', sold: 120 },
{ genre: 'Shoo2ter', sold: 350 },
{ genre: 'Oth4er', sold: 150 },
];
chart.options({
type: 'interval',
data,
encode: { x: 'genre', y: 'sold', color: 'genre' },
legend: {
color: {
size: 100,
itemWidth: 120,
position:'left',
// itemMarker
itemMarker: (d, index) => shapeList[index],
// itemLabel
itemLabelFill: 'red',
// itemValue
itemValueText: (d, index) => data[index]['sold'],
// itemBackground
itemBackgroundFill: (d) => d.color,
itemBackgroundFillOpacity: 0.2,
},
},
});
chart.render();
Reproduction link / 复现链接
No response
Steps to Reproduce the Bug or Issue / 重现步骤
Version / 版本
Please select / 请选择
OS / 操作系统
- macOS
- Windows
- Linux
- Others / 其他
Browser / 浏览器
- Chrome
- Edge
- Firefox
- Safari (Limited support / 有限支持)
- IE (Nonsupport / 不支持)
- Others / 其他