G2
一套图形语法
快速上手
教程
API
图表
移动端图表
下载
关于
github
列分面
分面 /
列分面
选择主题
源码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列分面</title> <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/> <!--如果不需要jquery ajax 则可以不引入--> <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script> <!-- 引入 G2 脚本 --><script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script> </head> <body> <div id="c1"></div> <!-- G2 code start --> <script> $.getJSON('../../static/data/diamond.json',function (data) { var chart = new G2.Chart({ id: 'c1', width: 1000, height: 500, plotCfg: { margin: [40, 80, 80, 80] } }); chart.source(data); chart.facet(['cut']); chart.axis('carat',{title: null}) chart.point().position('carat*price').color('clarity'); chart.render(); }); </script> <!-- G2 code end --> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列分面</title> <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/> <!--如果不需要jquery ajax 则可以不引入--> <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script> <!-- 引入 G2 脚本 --><script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script> <script> G2.Global.setTheme('dark'); </script> </head> <body> <div id="c1"></div> <script> $.getJSON('../../static/data/diamond.json',function (data) { var chart = new G2.Chart({ id: 'c1', width: 1000, height: 500, plotCfg: { margin: [40, 80, 80, 80] } }); chart.source(data); chart.facet(['cut']); chart.axis('carat',{title: null}) chart.point().position('carat*price').color('clarity'); chart.render(); }); </script> </body> </html>
JS
<script> $.getJSON('../../static/data/diamond.json',function (data) { var chart = new G2.Chart({ id: 'c1', width: 1000, height: 500, plotCfg: { margin: [40, 80, 80, 80] } }); chart.source(data); chart.facet(['cut']); chart.axis('carat',{title: null}) chart.point().position('carat*price').color('clarity'); chart.render(); }); </script>
运行
复制
分面
矩阵分面
圆型分面
行分面
列分面
树形分面-柱状图
树形分面-多级
镜像分面
镜像分面 - 翻转
