G2
一套图形语法
快速上手
教程
API
图表
移动端图表
下载
关于
github
百分比层叠区域图
百分比层叠区域图和层叠区域图一样，唯一的区别是各个数据集纵轴数据和是1。
区域图 /
百分比层叠区域图
选择主题
源码
<!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> var data = [ {country: 'Asia', year: '1750', value: 502}, {country: 'Asia', year: '1800', value: 635}, {country: 'Asia', year: '1850', value: 809}, {country: 'Asia', year: '1900', value: 947}, {country: 'Asia', year: '1950', value: 1402}, {country: 'Asia', year: '1999', value: 3634}, {country: 'Asia', year: '2050', value: 5268}, {country: 'Africa', year: '1750', value: 106}, {country: 'Africa', year: '1800', value: 107}, {country: 'Africa', year: '1850', value: 111}, {country: 'Africa', year: '1900', value: 133}, {country: 'Africa', year: '1950', value: 221}, {country: 'Africa', year: '1999', value: 767}, {country: 'Africa', year: '2050', value: 1766}, {country: 'Europe', year: '1750', value: 163}, {country: 'Europe', year: '1800', value: 203}, {country: 'Europe', year: '1850', value: 276}, {country: 'Europe', year: '1900', value: 408}, {country: 'Europe', year: '1950', value: 547}, {country: 'Europe', year: '1999', value: 729}, {country: 'Europe', year: '2050', value: 628}, {country: 'Oceania', year: '1750', value: 200}, {country: 'Oceania', year: '1800', value: 200}, {country: 'Oceania', year: '1850', value: 200}, {country: 'Oceania', year: '1900', value: 300}, {country: 'Oceania', year: '1950', value: 230}, {country: 'Oceania', year: '1999', value: 300}, {country: 'Oceania', year: '2050', value: 460}, ]; var Stat = G2.Stat; var chart = new G2.Chart({ id: 'c1', width: 1000, height: 500 }); chart.source(data, { year: { type: 'linear', tickInterval: 25 }, '..percent': { formatter: function(value) { value = value || 0; value = value * 100; return parseInt(value); }, alias: 'percent(%)' } }); chart.areaStack().position(Stat.summary.percent('year*value')) .color('country', ['#ffd54f', '#ef6c00', '#1976d2', '#64b5f6']); 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> var data = [ {country: 'Asia', year: '1750', value: 502}, {country: 'Asia', year: '1800', value: 635}, {country: 'Asia', year: '1850', value: 809}, {country: 'Asia', year: '1900', value: 947}, {country: 'Asia', year: '1950', value: 1402}, {country: 'Asia', year: '1999', value: 3634}, {country: 'Asia', year: '2050', value: 5268}, {country: 'Africa', year: '1750', value: 106}, {country: 'Africa', year: '1800', value: 107}, {country: 'Africa', year: '1850', value: 111}, {country: 'Africa', year: '1900', value: 133}, {country: 'Africa', year: '1950', value: 221}, {country: 'Africa', year: '1999', value: 767}, {country: 'Africa', year: '2050', value: 1766}, {country: 'Europe', year: '1750', value: 163}, {country: 'Europe', year: '1800', value: 203}, {country: 'Europe', year: '1850', value: 276}, {country: 'Europe', year: '1900', value: 408}, {country: 'Europe', year: '1950', value: 547}, {country: 'Europe', year: '1999', value: 729}, {country: 'Europe', year: '2050', value: 628}, {country: 'Oceania', year: '1750', value: 200}, {country: 'Oceania', year: '1800', value: 200}, {country: 'Oceania', year: '1850', value: 200}, {country: 'Oceania', year: '1900', value: 300}, {country: 'Oceania', year: '1950', value: 230}, {country: 'Oceania', year: '1999', value: 300}, {country: 'Oceania', year: '2050', value: 460}, ]; var Stat = G2.Stat; var chart = new G2.Chart({ id: 'c1', width: 1000, height: 500 }); chart.source(data, { year: { type: 'linear', tickInterval: 25 }, '..percent': { formatter: function(value) { value = value || 0; value = value * 100; return parseInt(value); }, alias: 'percent(%)' } }); chart.areaStack().position(Stat.summary.percent('year*value')) .color('country', ['#ffd54f', '#ef6c00', '#1976d2', '#64b5f6']); chart.render(); </script> </body> </html>
JS
<script> var data = [ {country: 'Asia', year: '1750', value: 502}, {country: 'Asia', year: '1800', value: 635}, {country: 'Asia', year: '1850', value: 809}, {country: 'Asia', year: '1900', value: 947}, {country: 'Asia', year: '1950', value: 1402}, {country: 'Asia', year: '1999', value: 3634}, {country: 'Asia', year: '2050', value: 5268}, {country: 'Africa', year: '1750', value: 106}, {country: 'Africa', year: '1800', value: 107}, {country: 'Africa', year: '1850', value: 111}, {country: 'Africa', year: '1900', value: 133}, {country: 'Africa', year: '1950', value: 221}, {country: 'Africa', year: '1999', value: 767}, {country: 'Africa', year: '2050', value: 1766}, {country: 'Europe', year: '1750', value: 163}, {country: 'Europe', year: '1800', value: 203}, {country: 'Europe', year: '1850', value: 276}, {country: 'Europe', year: '1900', value: 408}, {country: 'Europe', year: '1950', value: 547}, {country: 'Europe', year: '1999', value: 729}, {country: 'Europe', year: '2050', value: 628}, {country: 'Oceania', year: '1750', value: 200}, {country: 'Oceania', year: '1800', value: 200}, {country: 'Oceania', year: '1850', value: 200}, {country: 'Oceania', year: '1900', value: 300}, {country: 'Oceania', year: '1950', value: 230}, {country: 'Oceania', year: '1999', value: 300}, {country: 'Oceania', year: '2050', value: 460}, ]; var Stat = G2.Stat; var chart = new G2.Chart({ id: 'c1', width: 1000, height: 500 }); chart.source(data, { year: { type: 'linear', tickInterval: 25 }, '..percent': { formatter: function(value) { value = value || 0; value = value * 100; return parseInt(value); }, alias: 'percent(%)' } }); chart.areaStack().position(Stat.summary.percent('year*value')) .color('country', ['#ffd54f', '#ef6c00', '#1976d2', '#64b5f6']); chart.render(); </script>
运行
复制
百分比层叠区域图
百分比层叠区域图和层叠区域图一样，唯一的区别是各个数据集纵轴数据和是1。
了解更多
区域图
区域图（存在空值）
层叠区域图
百分比层叠区域图
范围区域图与线图
大规模区域图
streamgraph
