light-chart
Version:
Charts for mobile visualization.
81 lines (77 loc) • 2.26 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼图选中交互 demo</title>
<link rel="stylesheet" href="./assets/common.css">
<style>
html {
font-family: "Helvetica Neue", "San Francisco", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC",
"Microsoft YaHei", sans-serif;
}
</style>
</head>
<body>
<div>
<canvas id="mountNode" style="position: relative;">
</canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.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',
width: window.innerWidth,
height: window.innerWidth > window.innerHeight ? window.innerHeight - 54 : window.innerWidth * 0.707,
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'
},
onEnd(ev) {
const { shape, data, shapeInfo} = ev;
if (shape) {
$('#number').css('color', shapeInfo.color);
$('#number').text(data.percent * 100 + '%');
$('#name').text(data.name);
}
}
});
chart.render();
</script>
</body>
</html>