light-chart
Version:
Charts for mobile visualization.
97 lines (92 loc) • 2.4 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>
<button id="changeBtn"> changeData </button>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
<script>
var data = [
{ name: '芳华', percent: 0.4, a: '1' },
{ name: '妖猫传', percent: 0.2, a: '1' },
{ name: '机器之血', percent: 0.18, a: '1' },
{ name: '心理罪', percent: 0.15, a: '1' },
{ name: '寻梦环游记', percent: 0.05, a: '1' },
{ name: '其他', percent: 0.12, a: '1' }
];
var chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
percent: {
formatter: function formatter(val) {
return val * 100 + '%';
}
}
});
chart.legend({
position: 'right'
});
chart.tooltip(false);
chart.coord('polar', {
transposed: true,
radius: 0.85,
innerRadius: 0.618
});
chart.axis(false);
chart
.interval()
.position('a*percent')
.color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
.adjust('stack')
.style({
lineWidth: 1,
stroke: '#fff',
lineJoin: 'round',
lineCap: 'round'
});
chart.guide().html({
position: [ '50%', '50%' ],
html: '<div style="text-align: center;width: 100px;height: 72px;vertical-align: middle;">'
+ '<p id="number" style="font-size: 28px;margin: 10px 10px 5px;font-weight: bold;"></p>'
+ '<p id="name" style="font-size: 12px;margin: 0;"></p>'
+ '</div>'
});
chart.interaction('pie-select', {
startEvent: 'tap',
animate: {
duration: 300,
easing: 'backOut'
},
cancelable: true,
onEnd(ev) {
const { shape, data, shapeInfo, selected } = ev;
if (shape) {
if (selected) {
$('#number').css('color', shapeInfo.color);
$('#number').text(data.percent * 100 + '%');
$('#name').text(data.name);
} else {
$('#number').text('');
$('#name').text('');
}
}
}
});
chart.render();
var btn = document.querySelector('#changeBtn')
btn.onclick = function() {
chart.changeData([ { name: 'test1', percent: 0.1, a: '1'}, { name: 'test2', percent: 0.1, a: '1'} ])
}
</script>
</body>
</html>