G2: The Grammar of Graphics in JavaScript https://github.com/antvis/g2
Examples a gogo @ https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
license: mit |
G2: The Grammar of Graphics in JavaScript https://github.com/antvis/g2
Examples a gogo @ https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.5/g2/3.0.0/g2.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<div id="c1"></div> | |
<script> | |
const data = [ | |
{ genre: 'Sports', sold: 275 }, | |
{ genre: 'Strategy', sold: 1150 }, | |
{ genre: 'Action', sold: 120 }, | |
{ genre: 'Shooter', sold: 350 }, | |
{ genre: 'Other', sold: 150 }, | |
]; | |
const chart = new G2.Chart({ | |
container: 'c1', | |
width: 500, | |
height: 500 | |
}); | |
chart.source(data); | |
chart.interval().position('genre*sold').color('genre'); | |
chart.render(); | |
</script> | |
</body> |