light-chart
Version:
Charts for mobile visualization.
93 lines (90 loc) • 2.07 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>气泡图</title>
<link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
<canvas id="mountNode"></canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const Animate = F2.Animate;
Animate.registerAnimation('circleOut', function(shape, animateCfg) {
const trueRadius = shape.attr('r');
let r = 0;
if (shape.get('cacheShape')) {
r = shape.get('cacheShape').attrs.r;
}
shape.attr('r', r);
shape.animate().to({
attrs: {
r: trueRadius
},
duration: animateCfg.duration,
easing: animateCfg.easing
});
});
$.getJSON('./data/bubble.json', data => {
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
LifeExpectancy: {
alias: '人均寿命（年）',
tickCount: 5
},
GDP: {
alias: '人均国内生产总值($)'
},
Country: {
alias: '国家/地区'
}
});
chart.axis('GDP', {
label(value){
return {
text: (value / 1000).toFixed(0) + 'k'
};
}
});
chart.axis('GDP', {
label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.tooltip(false);
chart.point().position('GDP*LifeExpectancy')
.size('Population', [ 4, 65 ])
.color('continent')
.style({
fillOpacity: 0.65
})
.animate({
appear: {
animation: 'circleOut',
duration: 250
},
update: {
animation: 'circleOut',
duration: 250
}
});
chart.render();
});
</script>
</body>
</html>