light-chart
Version:
Charts for mobile visualization.
66 lines (61 loc) • 1.59 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义 shape</title>
<link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
<canvas id="mountNode"></canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const Shape = F2.Shape;
Shape.registerShape('interval', 'triangle', {
getPoints(cfg) {
const x = cfg.x;
const y = cfg.y;
const y0 = cfg.y0;
const width = cfg.size;
return [
{ x: x - width / 2, y: y0 },
{ x: x, y: y },
{ x: x + width / 2, y: y0 }
]
},
draw(cfg, group) {
const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
const polygon = group.addShape('polygon', {
attrs: {
points: [
{ x:points[0].x, y:points[0].y },
{ x:points[1].x, y:points[1].y },
{ x:points[2].x, y:points[2].y }
],
fill: cfg.color
}
});
return polygon; // 将自定义Shape返回
}
});
const data = [
{ 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({
id: 'mountNode',
width: 400,
height : 200,
pixelRatio: window.devicePixelRatio,
});
chart.source(data);
chart.interval().position('genre*sold').color('genre').shape('triangle');
chart.render();
</script>
</body>
</html>