light-chart
Version:
Charts for mobile visualization.
101 lines (93 loc) • 2.85 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="chart-name" content="三角柱状图">
<title>Triangle Bar Chart</title>
</head>
<body>
<div class="chart-wrapper">
<canvas id="mountNode"></canvas>
</div>
<script src="../build/f2-all.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
<script src="https://d3js.org/d3-color.v1.min.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 leftPoints = [
{ x: points[0].x, y: points[0].y },
{ x: points[1].x, y: points[1].y },
{ x: points[1].x, y: points[0].y }
];
const rightPoints = [
{ x: points[1].x, y: points[1].y },
{ x: points[2].x, y: points[2].y },
{ x: points[1].x, y: points[0].y }
];
const left = group.addShape('polygon', {
attrs: {
points: leftPoints,
fill: cfg.color
}
});
const hsl = d3.hsl(cfg.color); // 右侧颜色降低亮度
hsl.l -= 0.15;
const right = group.addShape('polygon', {
attrs: {
points: rightPoints,
fill: hsl
}
});
return [ left, right ]; // 将自定义Shape返回
}
});
const data = [
{ name: '珠穆朗玛峰', height: 8844.43 },
{ name: '乔戈里峰', height: 8611 },
{ name: '贡嘎雪山', height: 7556 },
{ name: '布喀达坂峰', height: 6860 },
{ name: '梅里雪山', height: 6710 }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth > window.innerHeight ? (window.innerHeight - 54) : window.innerWidth * 0.707,
pixelRatio: window.devicePixelRatio,
padding: [ 'auto', 40 ]
});
chart.source(data);
chart.axis('height', false);
chart.axis('name', { line: null });
chart.legend(false);
chart.interval().position('name*height').color('name').shape('triangle');
data.map(obj => {
chart.guide().text({
position: [ obj.name, obj.height ],
content: obj.height + '米',
style: {
textAlign: 'center',
textBaseline: 'bottom'
},
offsetY: -10
});
});
chart.render();
</script>
</body>
</html>