x
1
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>雷达图</title>
6
<script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.22/index.js"></script>
7
</head>
8
<body>
9
<div style="width:416px;height:218px;margin:0 auto">
10
<canvas id="c1" style="width:416px;height:218px;"></canvas>
11
</div>
12
<script>
13
GM.Global.pixelRatio = 2;
14
var data = [
15
{name: '张飞',props: '智力', value: 65},
16
{name: '张飞',props: '武力', value: 97},
17
{name: '张飞',props: '政治', value: 50},
18
{name: '张飞',props: '统帅', value: 92},
19
{name: '张飞',props: '忠诚', value: 100},
20
{name: '关羽',props: '智力', value: 80},
21
{name: '关羽',props: '武力', value: 94},
22
{name: '关羽',props: '政治', value: 70},
23
{name: '关羽',props: '统帅', value: 95},
24
{name: '关羽',props: '忠诚', value: 99}
25
];
26
var chart = new GM.Chart({
27
id: 'c1'
28
});
29
chart.coord('polar');
30
chart.source(data, {
31
value: {
32
min: 0,
33
tickInterval: 20
34
}
35
});
36
//配置刻度文字大小,供PC端显示用(移动端可以使用默认值20px)
37
chart.axis('props', {
38
label: {
39
fontSize: 14
40
},
41
line: null
42
});
43
chart.axis('value', {
44
label: {
45
fontSize: 14
46
}
47
});
48
chart.line().position('props*value').color('name');
49
chart.render();
50
</script>
51
</body>
52
</html>
53
雷达图
雷达又叫戴布拉图、蜘蛛网图。 了解更多