x
1
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>行分面</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
$.getJSON('../../../static/data/diamond.json',function (data) {
13
var chart = new G2.Chart({
14
id: 'c1',
15
forceFit: true,
16
height: 450,
17
plotCfg: {
18
margin: [40, 80, 80, 80]
19
}
20
});
21
chart.source(data);
22
chart.legend('clarity', {
23
position: 'bottom'
24
}); // 设置底部图例
25
chart.facet([,'clarity']);
26
chart.point().position('carat*price').color('clarity');
27
chart.render();
28
});
29
</script>
30
</body>
31
</html>
32
行分面