x
1
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Aster plot</title>
6
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
7
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
8
</head>
9
<body>
10
<div id="c1"></div>
11
<script>
12
var data = [{"label":"Fisheries","colour":"#9E0041","score":59},{"label":"Mariculture","colour":"#C32F4B","score":24},{"label":"Artisanal Fishing Opportunities","colour":"#E1514B","score":98},{"label":"Natural Products","colour":"#F47245","score":60},{"label":"Carbon Storage","colour":"#FB9F59","score":74},{"label":"Coastal Protection","colour":"#FEC574","score":70},{"label":"Tourism & Recreation","colour":"#FAE38C","score":42},{"label":"Livelihoods","colour":"#EAF195","score":77},{"label":"Economies","colour":"#C7E89E","score":88},{"label":"Iconic Species","colour":"#9CD6A4","score":60},{"label":"Lasting Special Places","colour":"#6CC4A4","score":65},{"label":"Clean Waters","colour":"#4D9DB4","score":71},{"label":"Habitats","colour":"#4776B4","score":88},{"label":"Species","colour":"#5E4EA1","score":83}];
13
var chart = new G2.Chart({
14
id: 'c1',
15
forceFit: true,
16
height: 450
17
});
18
chart.source(data);
19
chart.coord('polar', {
20
inner: 0.2
21
});
22
chart.legend(false);
23
chart.axis('score', false);
24
chart.axis('label', {
25
labels: null
26
});
27
chart.interval().position('label*score').color('colour', function(val) {
28
return val;
29
}).style({
30
stroke: '#999',
31
lineWidth: 1
32
}).tooltip('score');
33
chart.render();
34
</script>
35
</body>
36
</html>
37
Aster plot
极坐标下的柱状图。